首页 > 代码库 > 富文本编译器的小说
富文本编译器的小说
最近在研究富文本编译器，也在网上看了一些资料，大致了解了一下几款富文本编译器，比如说（kissy_editor，ueditor，TinyMCE,kindeditor）。每个都是js牛人开发出来的，让我一度羡慕嫉妒恨啊，但回头想想自己去实现一个能获取更多知识。
于是我开始查阅一些资料，首先我去了解里面的功能是怎么实现的，结果我发现一个共同点就是通过js提供的execCommand函数去实现里面每个功能，这让我一下子恍然大悟，这个就是富文本编译器的核心机制，无论是哪种富文本编译器都会引用execCommand函数去实现功能。
先来看看这个execCommand函数是怎么玩的：
document.execCommand(sCommand[,交互方式, 动态参数])
注： 1.其中sCommand是一个指令参数，
2.交互参数方式如果是true将显示对话框，如果为false将不显示对话框
3.动态参数一般为一可用值或属性值
接下来是指令参数的命名和解释：
//相当于单击文件中的打开按钮
document.execCommand(”Open”);
//将当前页面另存为
document.execCommand(”SaveAs”);
//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);
//删除选中的文字;
document.execCommand(”Delete”,”false”,null);
//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);
//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);
//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);
//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);
//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);
//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);
//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);
//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);
//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);
//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);
//设置当前块的标签名;
document.execCommand(”FormatBlock”,”false”,sTagName);
//相当于单击文件中的打开按钮
document.execCommand(”Open”);
//将当前页面另存为
document.execCommand(”SaveAs”);
//剪贴选中的文字到剪贴板;
document.execCommand(”Cut”,”false”,null);
//删除选中的文字;
document.execCommand(”Delete”,”false”,null);
//改变选中区域的字体;
document.execCommand(”FontName”,”false”,sFontName);
//改变选中区域的字体大小;
document.execCommand(”FontSize”,”false”,sSize|iSize);
//设置前景颜色;
document.execCommand(”ForeColor”,”false”,sColor);
//使绝对定位的对象可直接拖动;
document.execCommand(”2D-Position”,”false”,”true”);
//使对象定位变成绝对定位;
document.execCommand(”AbsolutePosition”,”false”,”true”);
//设置背景颜色;
document.execCommand(”BackColor”,”false”,sColor);
//使选中区域的文字加粗;
document.execCommand(”Bold”,”false”,null);
//复制选中的文字到剪贴板;
document.execCommand(”Copy”,”false”,null);
//设置指定锚点为书签;
document.execCommand(”CreateBookmark”,”false”,sAnchorName);
//将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;
document.execCommand(”CreateLink”,”false”,sLinkURL);
介绍完了execCommand函数的说明，接下来看看在kindeditor富文本编译器中是这样引用：
function _nativeCommand(doc, key, val) {
try {
doc.execCommand(key, false, val);
} catch(e) {}
}
通过_nativeCommand函数传参，然后放到doc.execCommand中进行实现功能机制。
看下淘宝的kissy_editor中
在这里有个函数引用this.editor.execCommand（）
exec: function() {
this.editor.execCommand(this.name)
}
然后这个函数的定义如下
execCommand: function(m, n, l) { this.contentWin.focus(); k.Command.exec(this.contentDoc, m, n, l) }
其中k.Command.exec这个exec函数已经封装在下面的add定义中了，kissy_editor这个还引用了雅虎提供的一些技术进行实现
KISSY.Editor.add("core~command",
function(f) {
var d = YAHOO.env.ua,
b = {
backColor: d.gecko ? "hiliteColor": "backColor"
},
c = "bold,italic,underline,strikeThrough",
a = "styleWithCSS",
e = "execCommand";
f.Command = {
exec: function(i, h, j, g) {
h = b[h] || h;
this._preExec(i, h, g);
i[e](h, false, j)
},
_preExec: function(i, h, g) {
if (d.gecko) {
var j = typeof g === "undefined" ? (c.indexOf(h) === -1) : g;
i[e](a, false, j)
}
}
}
});
而在tinymce中看核心代码tinymce.min.js看的我是要崩溃，1万多行的js封装，里面每块都用引用execCommand,但每块都会单独定义出来，接下来
看看tinymce是怎么实现的：
（1） InsertHorizontalRule: function() {
r.execCommand("mceInsertContent", !1, "<hr />")
}
（2） e.execCommand("FontSize", !1, t.control.settings.value)
（3）function v() {
try {
i.getDoc().execCommand("enableObjectResizing", !1, !1)
} catch(e) {}
}
列举这3种，还有很多种写法，看的我是眼花缭乱。
接下来看看百度富文本编译器的引用
me.document.execCommand(‘2D-position‘, false, false);
综合上述所展示的，核心还是那个核心，就是外界的封装不同，页面风格不一样！
有的富文本编译器自带控件可配置方式，需要哪些功能的展示，自己随意加上配置，举例，最近刚研究的TinyMCE4.0.28版本，
它的配置可以这样设计 在页面先引入 <script type="text/javascript" src="http://www.mamicode.com/js/tinymce/tinymce.min.js"></script>，然后再加上
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist link image lists charmap print preview hr anchor pagebreak spellchecker",
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright",
style_formats: [
{title: ‘Bold text‘, inline: ‘b‘},
{title: ‘Red text‘, inline: ‘span‘, styles: {color: ‘#ff0000‘}
],
language:‘zh_CN‘
});
</script>
tinymce.init函数里面添加object类型参数，插件（plugins）可以任意设置，工具条（toolbar）内容可以任意设置所展现在页面中的功能块。一旦找到实现的一些规律的话，自己做起来的实现思路就清晰多了。
而我自己写了一个小型的富文本编译器，花了1个多月时间，让我挑战了一次，
界面看起来很简单，功能也简单。这次我的搭建了一个js架构，跟那些大牛人比，我还是小奶牛一个，通过自己的方式去搭建一个前端结构，如图
在这里我写的 execCommand操作如下
doEditCommand:function(name, arg){
try {
this.ifr.contentWindow.focus();
this.doc.execCommand(name, false, arg);
} catch(e) {}
}
原理一样，但里面功能机制还不入kissy_editor，ueditor，TinyMCE和kindeditor那么丰富，但是我学到了一些宝贵的思想和知识，富文本编译器这样的前端组件，也可以当成一个小型前端框架去理解，去学习。其他一些现实方式就不多说了，继续走在js研究的道路,“革命尚未成功，还需努力！”。