实现一个简易的富文本编辑器(一)

　　富文本编辑器又称为WYSIWYG(所见即所得)，其本质就是在一个页面元素中嵌入HTML代码，并且这个元素可以像文档输入框一样进行文本的编辑，它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器，编辑邮件以及论坛发贴都用到富文本编辑器。

启动富文本编辑：设置contenteditable

　　让元素的内嵌HTML可以编辑，有三种实现方法：

　　1.在HTML标签里写入contenteditable即可。

"border:1px solid #f00;width:100px;height:100px" contenteditable>

　　2.在脚本中设置对应元素的contentEditable值为true。这个属性有三种取值，false/true/inherit分别对应“关闭”/“开启”/“继承”。

document.getElementById("editor").contentEditable = true;

　　3.对于内嵌框架可以设置designMode="on"，不过这种方式兼容性不太好。

富文本编辑器样式命令：document.execCommand()

　　其实元素设置contentedable后就已经实现了一个最基本的富文本编辑器，只是这个编辑器和文本输入框一样，实在简陋。如果它能很便捷的设置内容的样式，那就完美了。

　　与富文本样式交互的方法是document.execCommand()。execCommand函数传递三个参数，第一个参数为命令，第二个参数表示是否需要提示用户提供给该命令一个值，第三个参数表示执行当前命令的参数值。有些浏览器设置第二个参数为true会报错，所以为了便于移植，通常我们设置为false。

　　比如要给选中文本字体加粗，命令表达式当如下所示：

document.execCommand(bold, false, null);

　　常用命令有：

　　backcolor:设置文档背景颜色、bold:文本加粗、copy:复制到剪切板、createlink:给选中文本设置连接、cut:剪切、delete:删除文本、fontname:字体名称

　　fontsize:字体大小、forecolor:字体换色、formatblock:用HTML标签格式化选中文本、indet:缩进、inserthorizontalrule:插入

　　insertorderedlist:插入

、insertunorderedlist:插入
、insertparagraph:插入

、italic:文本斜体、justifycenter:文本居中、justifyleft:左对齐

　　outdent:减少缩进、paste:粘贴剪切板内容、removeformat:删除样式、selectall:选中所有文本、underline:添加下划线、unlink:撤销链接。

实现简易富文本编辑器

　　一个简易的富文本编辑器应该有一系列的样式按钮，一个编辑框。这里我就简单实现四个样式操作按钮。

  
  <button id="btn1">button>
  <button id="btn2">button>
  <button id="btn3">button>
  <button id="btn4">button>

     
  <div id="editor">
      Click to Editor...
  div>
  <input id="printContent" type="button" value="打印编辑器内容">

　　稍微给按钮以及编辑器设置下样式。

　　页面画出来后，接下来我们来实现其功能。

　　让编辑器生效只需

　　1.开启元素的编辑功能editor.contentEditable = true;

　　2.给所有样式按钮绑定启动document.execCommand的事件。

//初始化
function initEditor() {
    openOrCloseEditor("editor", "true");//开启元素编辑
    bindBtnCommand();//给样式按钮绑定命令
}

　　开启元素编辑的openOrCloseEditor函数实现如下：

/**
* 
* 功能： 开启元素编辑功能
* 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
*/
function openOrCloseEditor(el, operate) {
    var editor = document.getElementById(el);
    editor.contentEditable = operate;
}

　　绑定样式按钮bindBtnCommand函数实现如下：

//按钮绑定命令
function bindBtnCommand() {
    var btns = document.getElementsByTagName("button"),
        btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
        len = btnConfigs.length;
    for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
        (function(btnConfig, btn) {
            var msg = btnConfig.split("|"),
                lab = msg[0],
                value = msg[1],
                title = msg[2];
            btn.innerHTML = lab;
            btn.title = title;
            btn.onclick = function(e) {
                document.execCommand(lab, false, value);
            }
        })(btnConfig, btns[i]);
    }
}

　　接下来实现“打印编辑内容”按钮功能：

//获取编辑器内嵌内容
function getContent(el) {
    var editor = document.getElementById(el);
    return editor.innerHTML;
}

//打印按钮绑定触发事件
document.getElementById("printContent").onclick = function(e) {
    var content = getContent("editor");
    document.write(content);
};

　　最后调用initEditor使编辑器生效

initEditor();

　　完整代码如下：

  
    
    
    
    
    
    

  
  
  
  
  
  
  
  

      Click to Editor...
  
  
  
  

　　简易富文本编辑器达成！