iframe html 编辑器,iframe类型在线编辑器要点

正在用新浪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整图左下角居然还有一行字，呵呵: