发布模版 1.5
关键词: javascript blog
继续改进原先的模版。初级目标倒是很容易实现:增加“无参考网址”选择(对应动画),允许反复添加代码(各栏自动清空,选项则保留上一次的选择,按钮由“生成代码”变为“新添代码”)。其它小的修正诸如如果图片地址不是链接模式,而是普通 url 则生成 img 形式的代码,不再试图添加 border = 0 的代码。
调试的时候却发现一个之前都没有留意到的问题——新增两个以上的图片地址,之前所有的地址将丢失(除了第一条是 html 直接写的不会丢失,其余都是 javascript 生成的全部丢失)。原因是按下“新增图片”的按钮之后,并不是仅仅增加一个新的图片地址栏,而是重新写所有的地址栏(除了第一个),在此之上再新增一个……
想想似乎比较复杂,于是暂时丢下这个问题从而转向之前提到的“文本编辑框”的设想。由于自己平时写影评基本上不用什么格式,除了转行最多就是个字体加粗。仅仅实现这两者应该不难吧!然而我错了!实在没有想到 firefox 进入 1.5 之后竟然对原先的 window.getSelection() 不再支持了!(而 ie 自然可以用 document.selection.createRange() 进行操作)对光标选定的文字进行操作便成了艰巨的任务。(选定文字添加加粗的代码)经过长时间的 digging,终于在三个网页的帮助下不辱使命:(涉及跨浏览器兼容)
JavaScript Get selection | Finding the textarea selection |
Finding selection start and end position in a textarea, in Internet Explorer
而后关于将输入的“回车”自动转换成 < br / > 也十足让人苦恼了一阵。原来 firefox 可以直接把 n 替换即可,而对于 ie 来说一个回车却是 rn……又是一通折磨。完成之后大体如下:
最后面对让人头大的东西——小问题,大麻烦。最初的解决方案是在写入新的一条空白图片地址栏的时候,将上一条地址事先取出,然后用 value = 的形式修改上一条的地址栏的代码。这样一来,在重写代码的时候就会预写入之前保存的地址。
然而实践证明这样是相当不灵活的。因为这个修改是一次性的,之后再也无法改变这个值。也就是说,如果在生成新的地址栏之后,我去修改旧的地址,当再一次新增地址栏之时,我将依然获得修改之前的地址。这显然不符合我的需求。
最终的解决方法是每次新增地址栏之前,用一个临时的 array 去保存当前所有的地址(除第一条),然后等生成完毕之后,再依次将值赋给之前的每一条地址栏……要命~
horan’s blog template@bokee v1.5