ant design 使用富文本编辑器富文本编辑器实现

转载

风之谷启航 2024-03-30 07:49:58

文章标签 ant design 使用富文本编辑器 javascript ViewUI 富文本编辑器 HTML 文章分类 架构后端开发

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

启动富文本编辑：设置contenteditable

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

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

<div style="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:插入<hr>、insertimage:插入图片

　　insertorderedlist:插入<ol>、insertunorderedlist:插入<ul>、insertparagraph:插入<p>、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="打印编辑器内容">

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

<style type="text/css">
    #editor {
        width:600px;
        height:200px;
        border:1px solid #ccc;
    }
    button {
        margin:1px;
        border:1px solid #aaa;
        background:#ffe;
        cursor:pointer;
        overflow:hidden;
    }
    button:hover {
        background:#ccc;
        border:1px solid #00f;
    }
</style>

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

　　让编辑器生效只需

　　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();

　　完整代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>简易富文本编辑器.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<style type="text/css">
    #editor {width:600px;height:200px;border:1px solid #ccc;
    }
    button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
    button:hover {background:#ccc;border:1px solid #00f;}
</style>
  </head>
  
  <body>
  <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="打印编辑器内容">
  <script type="text/javascript">
        initEditor();
        
        //初始化
        function initEditor() {
            openOrCloseEditor("editor", "true");//开启元素编辑
            bindBtnCommand();//给样式按钮绑定命令
        }
        
        /**
        * 
        * 功能： 开启元素编辑功能
        * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
        */
        function openOrCloseEditor(el, operate) {
            var editor = document.getElementById(el);
            editor.contentEditable = operate;
        }
        
        //按钮绑定命令
        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);
        };
    </script>
  </body>
</html>

　　简易富文本编辑器达成！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。