制作HTML编辑器,网站文章编辑器，在线word编辑器

最新推荐文章于 2025-03-26 14:27:14 发布

原创最新推荐文章于 2025-03-26 14:27:14 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

J2ee 专栏收录该内容

5 篇文章

订阅专栏

http://hi.baidu.com/i_ccboy/item/f40ac6fda4a38214fe35822e

你要的是所见即所得HTML编辑器，简单来说需要几个基本步骤：
1，需要一个可以编辑同时又可显效果的编辑框。textarea不行，它只能用来输入纯文本，不能显示颜色、斜体之类的文字样式，就像记事本。
你可以使用iframe来实现，修改iframe的designMode属性使其可以被编辑。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

这样你就可以在这个iframe区域里写字了。

2，选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时，一般是先打字，再编辑样式。所以你需要一个选中要处理文本的方法。JS的 selection.createRange()可以选中文本，返回一个对象，你可以通过访问该对象的text属性得到被选中的文本。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>

3，改变被选中文本的样式。selection.createRange()选中文本，返回一个对象，该对象有一个方法execCommand()，可以用来改变被选中文本的样式。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>

execCommand()的常用用法：
字体--宋体、黑体、楷体等
execCommand("fontname","",字体)
字号--字号大小
execCommand("fontsize","",字号)
加重
execCommand("Bold")
斜体
execCommand("Italic")
下划线
execCommand("Underline")
删除线
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷贝
execCommand("Copy")
粘贴
execCommand("Paste")
取消操作--IE5.0以后可以无限取消
execCommand("Undo")
重复操作
execCommand("Redo")

把上面的每个用法用按钮来实现，你就已经完成了一个简单的可视文本编辑器。

------------------------------------------------------------------------------------------------

HTML在线编辑器实际上是什么
其实有好几种实现方式，目前用得最多、兼容性最好的还是iframe方式。

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
换而言之，HTML在线编辑器就是一个可编辑的iframe。

加粗、斜体、下划线、加链接等功能如何实现
浏览器已经提供了实现这些功能的接口execCommand：

iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
这三个参数的意思分别是：

cmd：命令文本，有好多，IE的可以看这里，Firefox的可以看这里。
isDefaultShowUI：是否默认显示交互界面，比如加链接的时候，可以通过界面填入链接。不过这个参数存在兼容性问题，一般设为false将其禁用，并另外制作交互界面。
value：传入的值，某些命令可以省略。
execCommand的问题是，生成的代码可能不标准，比如在IE下，文字加粗用的是b标签而不是strong标签。

交互问题
用户不可能总是在编辑器中输入，比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字，当他按了加粗按钮后，选区以及焦点也会跟着跑到那去，因此选区（选中的文字）丢失，操作也就无法完成；同理，插入图片时插入位置也会丢失。

也就是说，要保存最后出现在编辑器中的选区。我采取的方案是，当焦点在编辑器内的时候，用一个定时器（setInterval）定时获取当前选区。选区编程平时很少用，做起来也有很多兼容性问题，主要是参考微软的MSDN（TextRange ControlRange）和Mozilla的MDC（Range Selection）了。

回车问题
在IE下，按回车是换段落，生成<p>，但在Firefox下是换行，生成的是<br>。要解决这个问题，就要监听keydown事件，如果检测到按键是回车，就插入“<p></p>”。

获取标准的代码
如何获取编辑的内容呢？这个问题很简单，只要获取iframe页面body中的innerHTML就可以了：

var content = iframe.contentWindow.document.body.innerHTML;
然而，IE下的innerHTML非常不标准：标签名是大写的，属性没有引号包起来，单标签也没有结束符……即便是Firefox下获取的代码，也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。

总结
不多说了，做一遍HTML编辑器，你就会知道CKEditor是多么强大。