富文本编辑器的简单实现原理

最新推荐文章于 2024-05-24 19:48:09 发布

weixin_34332905

最新推荐文章于 2024-05-24 19:48:09 发布

阅读量2k

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/qingsong/p/10152464.html

版权

<!--
   --  富文本编辑器的简单实现原理
   --  参考文档：
   --  1.  w3cshool：https://www.w3cschool.cn/javascript/javascript-execcommand.html
   --  2. 火狐开发者中心：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
   --
   --  要点：1. 添加div标签的一个属性contenteditable设置为true，使该div元素可编辑；
   --              2. js调用document.execCommand(指令参数[命令], false, 动态参数[值])函数，
   --              3. 函数中第二个参数应始终为false，因为参数为true会显示对话框，而火狐并不支持。
   --              4. document.execCommand("paste"); 为粘贴命令，浏览器默认未开启，需要在user.js配置文件中开启。
   -->
<!DOCTYPE html>
<html>
    <head>
        <title>富文本编辑器实现原理</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <style>
             #edit{
                     height:260px;
                     width:100%;
                     overflow: scroll; 
                     border:solid 1px black
             }
        </style>
    </head>
    <body>
        <div id="edit" name="edit" contenteditable="true"></div>
            <br>
        <button name="button-edit" data-name="justifyCenter">居中</button>
        <button name="button-edit"  data-name="justifyLeft">左对齐</button>
        <button name="button-edit"  data-name="justifyRight">右对齐</button>
        <button name="button-edit"  data-name="indent">添加缩进</button>
        <button name="button-edit"  data-name="outdent">去掉缩进</button> 
        <button name="button-edit"  data-name="fontname" data-value="宋体">宋体</button>
        <button name="button-edit"  data-name="fontsize" data-value="5">大字体</button>
        <button name="button-edit"  data-name="forecolor" data-value="red">红色字体</button>
        <button name="button-edit"  data-name="backColor" data-value="lightgreen">浅绿背景</button>
        <button name="button-edit"  data-name="bold">加粗</button>
        <button name="button-edit"  data-name="italic">斜体</button>    
        <button name="button-edit"  data-name="underline">下划线</button> 
        <button name="button-edit"  data-name="copy">复制</button>
        <button name="button-edit"  data-name="cut">剪切</button>    
        <!--paste命令浏览器默认未开启，需要在user.js配置文件中开启，详见火狐开发者中心文档-->
        <!--链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand-->
        <button name="button-edit"  data-name="paste">粘贴</button>
        <button name="button-edit"  data-name="selectAll">全选</button>
        <button name="button-edit"  data-name="delete">删除</button>    
        <button name="button-edit"  data-name="forwarddelete">后删除</button>    
        <button name="button-edit"  data-name="removeFormat">清空格式</button>
        <button name="button-edit"  data-name="redo">前进一步</button>    
        <button name="button-edit"  data-name="undo">后退一步</button>
        <button name="button-edit"  data-name="print">打印</button>    
        <button name="button-edit"  data-name="formatblock" data-value="div">插入div</button>
        <button name="button-edit"  data-name="inserthorizontalrule">插入hr</button>    
        <button name="button-edit"  data-name="insertorderedlist">插入ol</button>    
        <button name="button-edit"  data-name="insertunorderedlist">插入ul</button>
        <button name="button-edit"  data-name="formatblock" data-value="p">插入p</button>
        <button name="button-edit"  data-name="inserttext" data-value="这是我插入的内容！">插入文本</button>
        <button name="button-edit"  data-name="insertimage" data-value="http://images.cnblogs.com/cnblogs_com/qingsong/545927/o_39.gif">插入图像</button>    
        <button name="button-edit"  data-name="createlink" data-value="https://www.w3cschool.cn/javascript/javascript-execcommand.html">增加链接</button>
        <button name="button-edit"  data-name="unlink">删除链接</button> 
        <input type="button" onclick="isPaste()" value="检测paste粘贴命令是否支持">
        <input type="button" value="代码获取" onclick="showContent()">

    <script>

         /**  当文档载入完毕后，在富文本框内设置焦点，
           *  并且在第一行插入p标签。
           **/
         window.onload = function(){
              edit.focus();
              document.execCommand("formatblock", false, "p");
          }
         
         /**  在编辑框内，当键盘输入时自动在当前行插入p标签，
            *  也可以自动插入其它标签，
            *  当编辑框内检测到</li>标签时禁止插入p标签。
            */
        edit.onkeydown = function(){
                var str = edit.innerHTML;
                var val = str.search(/<\/li>/i);
                if(val < 0){
                      document.execCommand("formatblock", false, "p");
                }
          }
      
        var btns = document.getElementsByName('button-edit');
         
         /**  编辑按钮的js操作命令接口。
            *  按钮的data-name属性存放命令，data-value属性存放值。
            *  也可用其它标签代替。
            **/
        for(var i = 0; i < btns.length; i++){
            btns[i].onclick = function(){
                    if(this.getAttribute('data-value') == ""){
                        document.execCommand(this.getAttribute('data-name'));
                    }else{
                        document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));
                    }
                }
            }

          /**  富文本内的值是通过div的innerHTML获取的，
             *  表单提交时需提前用js转移到隐藏域里，然后提交，
             *  为了便于理解富文本的结构，这里省略这一步了。
             **/
          function showContent() {
                alert(edit.innerHTML);
            }
            
          /**  检测浏览器是否开启或支持paste命令，
              *  函数反回值为Boolean，
              *  true为支持，false为未开启或不支持paste粘贴命令
              *  paste粘贴命令需要在user.js配置文件中开启。
              *  详见火狐开发者中心相关文档：
              *  https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
              **/
         function isPaste(){
                  if(document.execCommand("paste")) {
                              alert("浏览器支持或开启了paste粘贴命令！");
                    }else{
                              alert("浏览器不支持paste粘贴命令，\n或未在user.js配置文件中开启！");
                    }
            }
        </script>
    </body>
</html>

注意事项：

用a或span元素添加onclick事件来执行document.execCommand()函数命令会失效，要用button或<input type="button">添加onclick事件来执行才会成功。尤其添加font awesome字体图标时，button能够添加字体图标，但input不能添加字体图标。如：

引入图标字体：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

添加链接按钮图标：

<button class="fa fa-link" onclick="addLink()"></button>

js函数执行：

 function addLink(){
       var lineVal=prompt("请输入链接地址：","");
       if(lineVal != null  && lineVal != ''){
               var patt=/[http|https]+:\/\/[^\s]*/i;
               if(patt.test(lineVal)){
                       document.execCommand("createlink", false, lineVal);
                }else{
                       alert("链接地址输入格式错误，请重新输入！");
                }
         }
  }

但不能用

<span class="fa fa-link" onclick="addLink()"></span>

来执行，否则document.execCommand()函数执行的命令不成功。

转载于:https://www.cnblogs.com/qingsong/p/10152464.html

weixin_34332905

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器的简单实现原理

<!-- -- 富文本编辑器的简单实现原理 -- 参考文档： -- 1. w3cshool：https://www.w3cschool.cn/javascript/javascript-execcommand.html -- 2. 火狐开发者中心：https://developer.mozilla.org/zh-CN/docs/Web/API/D...
复制链接

扫一扫