要使用富文本编辑器，首先你得了解什么是富文本编辑器。富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。一些常见的如kindeditor,fckeditor等，而博客使用的是wangEditor编辑器，至于为什么选择这个，不再本话题之内。

富文本编辑器有很多，博主就以wangEditor编辑器为例向大家展示富文本编辑器的魅力所在。

名字：wangEditor编辑器

特点：基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费；wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

获取方式：

怎样获取就不赘述了，点击链接下载就OK了。说明文档：www.kancloud.cn/wangfupeng/wangeditor3/332599，你也可以点击此链接跳转到官方说明文档查看具体内容。

1.下载编辑器

    通过上面的地址相信你已经很容易、轻松的获取到了wangEditor编辑器（我是从GitHub上下载的）

    打开下载的文件


这么多文件，是不是很头大，不用担心，除了release和src的文件一定得保留外其他的的适当删除（ps：不是除这两个外都删除，请尊重开发者的劳动成果和LICENSE开源协议）。


2.搭建编辑器

   

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>

只需将"wangEditor.min.js"文件引入页面中，然后var editor = new E('#editor')  这句话不用多说吧，创建editor对象，再editor.create()，一个编辑器就创建好了，刷新一下页面


创建的编辑器如图所示，是不是和博客的留言编辑很像，


3.美化

如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样，将编辑区域和菜单分离，也可以实现。

这样，菜单和编辑器区域就是使用者可自己控制的元素，可自定义样式。例如：将菜单fixed、编辑器区域高度自动增加等

编辑器归根到底还是div，所以如果你觉得原生的UI难看，不妨按照自己的思路来修改。

4.多编辑器

wangEditor编辑器还可以在一个页面同时使用一个或多个编辑器

创建多个编辑器

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor 一个页面多个编辑器</title>
    <style type="text/css">
        .toolbar {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1" class="toolbar">
    </div>
    <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
    <div id="div2" class="text">
        <p>第一个 demo（菜单和编辑器区域分开）</p>
    </div>

    <div id="div3">
        <p>第二个 demo（常规）</p>
    </div>

    <!-- 引用js -->
    <script type="text/javascript" src="/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor

        var editor1 = new E('#div1', '#div2')
        editor1.create()

        var editor2 = new E('#div3')
        editor2.create()
    </script>
</body>
</html>

是不是很轻松。

5.内容处理

    1）设置内容，可以使用编辑器的方法进行设置，如下editor.txt.html('<p>用 JS 设置的内容</p>')

    2）获取内容，可以html和text的方式读取编辑器的内容

        <div id="div1">

    <p>欢迎使用 wangEditor 编辑器</p>
</div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()

    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html())
    }, false)

    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor.txt.text())
    }, false)

</script>

需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html，如果显示的时候需要对其中的<table><code><blockquote>等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考

6.配置参数，

        如果编辑器不能粘贴来自其它网页复制的文本，不能保存图片....那么它和textarea便签有什么区别？这也就不叫富文本编辑器了。

    wangEditor一个提供了如下配置项：

配置菜单

debug模式
onchange
配置编辑区域z-index
多语言
粘贴文本
插入网络图片回调
插入链接的校验
插入网络图片的校验
onfocus
onblur
配置颜色
配置表情
配置字体

点击链接查看详细信息，

    需要特别注意的是：插入网络图片和插入图片回调。


插入网络图片：

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCallback = function (url) {
    console.log(url) // url 即插入图片的地址
}
editor.create()

设置url，并在后台接受图片，不再赘述，相信需要这个编辑器的同仁都会。

详情请看：https://www.kancloud.cn/wangfupeng/wangeditor3/335782



插入图片自定义校验：

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCheck = function (src) {
    console.log(src) // 图片的链接

    return true // 返回 true 表示校验成功
    // return '验证失败' // 返回字符串，即校验失败的提示信息
}
editor.create()



配置颜色：

   
 var E = window.wangEditor
    var editor = new E('#div1')
    // 自定义配置颜色（字体颜色、背景色）
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ]
    editor.create()



配置表情：

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
    editor.customConfig.emotions = [
        {
            // tab 的标题
            title: '默认',
            // type -> 'emoji' / 'image'
            type: 'image',
            // content -> 数组
            content: [
                {
                    alt: '[坏笑]',
                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
                },
                {
                    alt: '[舔屏]',
                    src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
                }
            ]
        },
        {
            // tab 的标题
            title: 'emoji',
            // type -> 'emoji' / 'image'
            type: 'emoji',
            // content -> 数组
            content: ['
最后修改：2018 年 06月 23日 00:25:44

文章声明：非特殊说明，本文版权归 凌萍分享 所有，转载请注明出处
本文标题：富文本编辑器 - 在线写作的利器
本文标签：富文本
如果觉得本篇文章对你有用，请随意赞赏;赞赏将用于服务器、域名开支