NicoNicoNi

wangEditor使用手记
富文本编辑器是项目中经常用得到的一个插件,比较流行的应该是百度的UEditor(UE)吧,优点是功能比较强大,缺点...
扫描右侧二维码阅读全文
15
2018/07

wangEditor使用手记

富文本编辑器是项目中经常用得到的一个插件,比较流行的应该是百度的UEditor(UE)吧,优点是功能比较强大,缺点是需要加载的文件很多,配置也比较多,不常用的功能也比较多,正因为这样,百度又推出了一款比UEditor更轻量级的UMeditor(UM),体积更小,功能更精简。

我在使用的UM的做图片上传的时候,图片已经上传成功,但是一直提示上传出错,且图片不能插入到编辑器中,不方便 debug也是一大痛点,google了很久,找到的也是一堆到处复制粘贴的 “ 偏方 ”。后来我选择了在慕课网上了解到的 wangEditor

这是一个个人在维护的开源项目,我选择这款编辑器的想法是这样的:

优点:

1.体积小,全局只需要加载一个js文件就行。

2.界面简洁,功能实用。

3.配置简单,注释详细。

缺点:

1.功能少,图片处理等方面的能力没有UEUM那么好,不过这些功能也勉强够应付需求了。

2.文档有点不够详细,不够他的注释足够详细。

下载

  • 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入release文件夹下找到wangEditor.js或者wangEditor.min.js即可
  • 使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js
  • 使用bower下载:bower install wangEditor (前提保证电脑已安装了bower)

创建编辑器

代码示例如下。注意,以下代码中无需引用任何 CSS 文件!!!

<!DOCTYPE html>
<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

使用富文本编辑器最基本的需求应该就是图文混排了吧,不过我遇到的需求也就只有这样了,所以就暂时只写这个了。

定义 debug 模式

可通过editor.customConfig.debug = true配置debug模式,debug模式下,有 JS 错误会以throw Error方式提示出来。默认值为false,即不会抛出异常。

但是,在实际开发中不建议直接定义为true或者false,可通过 url 参数进行干预,示例如下:

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
    editor.create()
</script>

用到富文本编辑器的地方一般都是文本域(textarea),不过这个用法有点不太一样:

wangEditor 从v3版本开始不支持 textarea ,但是可以通过onchange来实现 textarea 中提交富文本内容。

<div id="div1">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化,同步更新到 textarea
        $text1.val(html)
    }
    editor.create()
    // 初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>

接下来是图片处理

显示“上传图片”tab

默认情况下,编辑器不会显示“上传图片”的tab,因为你还没有配置上传图片的信息。

wangEditor

参考一下示例显示“上传图片”tab

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

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

    // 下面两个配置,使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用!!!
    // editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

    editor.create()
</script>

wangEditor

隐藏“网络图片”tab

默认情况下,“网络图片”tab是一直存在的。如果不需要,可以参考一下示例来隐藏它。

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

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

    // 隐藏“网络图片”tab
    editor.customConfig.showLinkImg = false

    editor.create()
</script>

使用 base64 保存图片

如果需要使用 base64 编码直接将图片插入到内容中,可参考一下示例配置

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor.create()
</script>

示例效果如下

wangEditor

上传图片 & 配置

将图片上传到服务器上的配置方式.

提示,如果上传图片提示错误,可以 打开 debug 模式 (会在 console.log 提示错误详细信息)来辅助排查错误。

上传图片

参考如下代码

<div id="div1">
    <p>欢迎使用 wangEditor 富文本编辑器</p>
</div>

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

    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/upload'

    // 进行下文提到的其他配置
    // ……
    // ……
    // ……

    editor.create()
</script>

其中/upload是上传图片的服务器端接口,接口返回的数据格式如下(实际返回数据时,不要加任何注释!!!)

{
    // errno 即错误代码,0 表示没有错误。
    //       如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组,返回若干图片的线上地址
    "data": [
        "图片1地址",
        "图片2地址",
        "……"
    ]
}
自定义 fileName

上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。

editor.customConfig.uploadFileName = 'yourFileName'

监听函数

可使用监听函数在上传图片的不同阶段做相应处理

editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件

        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
    },
    success: function (xhr, editor, result) {
        // 图片上传并返回结果,图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
    },
    fail: function (xhr, editor, result) {
        // 图片上传并返回结果,但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
    },
    error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
    },
    timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
    },

    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
    // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
        var url = result.url
        insertImg(url)

        // result 必须是一个 JSON 格式字符串!!!否则报错
    }
    }
}

自定义上传图片事件

如果想完全自己控制图片上传的过程,可以使用如下代码

editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取图片 url 后,插入到编辑器的方法

    // 上传代码返回结果之后,将图片插入到编辑器中
    insert(imgUrl)
}

最后贴一下我在ThinkPHP5中的部分代码:
前端:

<textarea id="myEditor" name="content" cols="" rows="" style="width: 100%;display: none" ></textarea>
<div id="editor"></div>

<script src="__STATIC__/admin/js/wangEditor.min.js"></script>
<script>
var E = window.wangEditor;
    var editor = new E('#editor');
    editor.customConfig.uploadImgServer = "{:url('admin/upload/wang')}";
    editor.customConfig.uploadFileName = 'images';
    editor.customConfig.uploadImgShowBase64 = true;
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0;
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果,图片插入成功之后触发
            console.log(result)
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果,但图片插入错误时触发
            console.log(result)
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
        // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
            // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果

            // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
            var url = result.data.path
            insertImg(url)

            // result 必须是一个 JSON 格式字符串!!!否则报错
        }
    }

    // 或者 var editor = new E( document.getElementById('editor') )
    var $text1 = $('#myEditor')
    editor.customConfig.onchange = function (html) {
        // 监控变化,同步更新到 textarea
        $text1.val(html)
    }
    editor.create()
    $text1.val(editor.txt.html())
</script>

后端(部分代码)(PHP)

$path = '/images/'.$this->makeFileDir().'/'.$fileName;
return json([
    'errno' => 0,
    'data' => [
        'path' => $path,
    ]
]);

这只是提供一下参考,只要返回的数据格式符合要求就行。我遇坑的地方是图片上传成功,插入编辑器失败,不过还好,debug的时候能在控制台上看到请求地址,方便调试,后来发现是我后台返回的图片路径不对造成的插入失败,如果返回的图片地址能够正常访问,图片是能正常插入的。

就暂时记录这么多吧,改项目的bug改到凌晨5点,头很胀,先眯一会...

Last modification:December 17th, 2018 at 01:43 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment