正在用新浪blog的ubb图片做一个类似的在线编辑器。
两天的成果,已经实现了核心功能,来说说一些注意事项吧,免的后者走弯路。
IE平台下产品(暂未做兼容修补)
IE5.0以后可以使用 iframe 来做编辑器的载体, 打开设计模式即可,语法:
[iframeId].document.desginMode =
"on";
我只用sina blog 所以sina的UBB我总是用,觉得不错,为了使用现成的素材,就用了sina的图,呵呵
sina ubb
的图是一张整图,所有按钮的各种状态已经被按顺序处理好了,使用时设置所有元件的背景图为这张整图,然后根据需要改变背景图坐标即可。语法:
[object].style.backgroundPosition =
"-100px -100px";
sina ubb 的特点是按钮可以记录光标位置所指示的字体样式,并呈现在相对应的button上。解决方案是使用
execCommand 设置命令 并使用 pueryCommandState 来检测当前是否设置了指定的命令。
pueryCommandState 返回Boolen值,根据结果来改变对应button的style即可。这里要为
iframe 添加一个 onclick事件用来监视光标,语法:
[iframeId].document.onclick = new
Function( "检测所有样式应用效果的方法函数名" );
在使用这些命令时是要注意的,有关字体方面的,例如FontSize, FontName等,需要调用一下语法:
[iframeId].document.execCommand("FontSize", "",
"7");
[iframeId].document.queryCommandState("FontSize");
该命令设置出来的html代码是:
size=7>text
并且取值范围只能是1-7, 如果要使用其他字号,就要变通方法,见后。
使用诸如Blod, Italic,要应用在 textRange对象内,语法:
[iframeId].document.selectiton.createRange().execCommand("Bold");
* 仅IE下可以省略后两个参数
[iframeId].document.selectiton.createRange().queryCommandState("Bold");
无法使用DIV作为button基类,必须使用 Button (input type="button")
来作为按钮,至于为什么没有多做研究。 将button 的style 设置一下,就可以了。
字号样式因为要突破1-7的限制,所以另外使用了 textRange对象中的 pasteHTML方法,语法:
var range =
[iframeId].document.selection.createRange();
range.pasteHTML = "
style=font-size:字号px>"+ range.text
+"
";因为在使用
textRange对象获取被选择的内容时,IE会自动补全Tag,所以有些人不愿意使用或者干脆做了大量的代码检测,来确保代码正确,目前我添加的ubb功能还不多,但比较有代表性,所以没发现有什么特别问题,我想只要用的适当,应该问题不大。注,我在粘贴内容时使用的是
range.text,而不是htmlText。
用pasteHTML方法后调用Undo 和 Redo 的功能,还没做,暂时未知后果。
字号选择面板没有特别之处,使用常规方法做之。
另外,在使用js动态生成 带有浮动(float)样式的DIV时,完全实效,不知道是什么原因,为深究。
关于"显示源代码", 使用了一个TextArea,在编辑时暂时隐藏,当选中CheckBox
时,将TextArea显示出来并定位到 iframe之上,并将值互转,语法:
[textarea].value =
[iframeId].document.body.innerHTML;
源代码显示切换回来时:
[iframeId].document.body.innerHTML =
[textarea].value;
至于恢复上次未编辑完的内容这个功能,我想应该是应用了Cookies,
启动js定时器保存输入内容到cookies中,需要时候再调用出来。
P.S.
新浪程序员比较幽默,该UBB整图左下角居然还有一行字,呵呵: