wangEditor富文本框的使用

wangEditor 轻量级web富文本编辑器，配置方便，使用简单

使用npm下载：
npm install wangeditor

使用:

var E = window.wangEditor
var editor = new E('#div');
editor.create();

可以使用npm install wangeditor安装（注意，这里wangeditor全是小写字母）

// 引用
var E = require('wangeditor')  // 使用 npm 安装
var E = require('/wangEditor.min.js')  // 使用下载的源码

// 创建编辑器
var editor = new E('#editor')
editor.create()

html 初始化内容

直接将内容写到要创建编辑器的

<div id="div1">
    <p>初始化的内容</p>
    <p>初始化的内容</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.create()
</script>

js 设置内容

创建编辑器之后，使用editor.txt.html(…)设置编辑器内容

<div id="div1">
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()
    editor.txt.html('<p>用 JS 设置的内容</p>')
</script>

追加内容

创建编辑器之后，可使用editor.txt.append('<p>追加的内容</p>')继续追加内容。

清空内容

可使用editor.txt.clear()清空编辑器内容

读取内容

可以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>

自定义菜单

编辑器创建之前，可使用editor.customConfig.menus定义显示哪些菜单和菜单的顺序。注意：v3 版本的菜单不支持换行折叠了（因为换行之后菜单栏是在太难看），如果菜单栏宽度不够，建议精简菜单项。

代码示例

<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.menus = [
        'head',
        'bold',
        'italic',
        'underline'
    ]
    editor.create()
</script>

默认菜单
编辑默认的菜单配置如下

[
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
]

配置编辑区域的 z-index

编辑区域的z-index默认为10000，可自定义修改，代码配置如下。需改之后，编辑区域和菜单的z-index会同时生效。

<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.zIndex = 100
    editor.create()
</script>

插入网络图片的回调

插入网络图片时，可通过如下配置获取到图片的信息。v3.0.10开始支持。

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

插入链接的校验

插入链接时，可通过如下配置对文字和链接进行校验。v3.0.10开始支持。

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkCheck = function (text, link) {
    console.log(text) // 插入的文字
    console.log(link) // 插入的链接

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

插入网络图片的校验

插入网络图片时，可对图片地址做自定义校验。v3.0.13开始支持。

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

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

配置 onfocus 函数

配置onfocus函数之后，用户点击富文本区域会触发onfocus函数执行。

<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.onfocus = function () {
        console.log("onfocus")
    }
    editor.create()
</script>

配置 onblur 函数

配置onblur函数之后，如果当前有手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发onblur函数执行。

<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.onblur = function (html) {
        // html 即编辑器中的内容
        console.log('onblur', html)
    }
    editor.create()
</script>

隐藏/显示 tab

显示“上传图片”tab

默认情况下，编辑器不会显示“上传图片”的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.uploadImgShowBase64 = true   // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

    editor.create()
</script>

隐藏“网络图片”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>

上传图片 & 配置

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

提示，如果上传图片提示错误，可以 打开 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地址",
    "……"
]

}
限制图片大小
默认限制图片大小是 5M

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
限制一次最多能传几张图片
默认为 10000 张（即不限制），需要限制可自己配置

// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5
自定义上传参数
上传图片时可自定义传递一些参数，例如传递验证的token等。参数会被添加到formdata中。

editor.customConfig.uploadImgParams = {
    // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
    // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
    token: 'abcdef12345'
}

如果还需要将参数拼接到 url 中，可再加上如下配置

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

editor.customConfig.uploadFileName = 'yourFileName'
自定义 header
上传图片时刻自定义设置 header

editor.customConfig.uploadImgHeaders = { 'Accept': 'text/x-json' }
withCredentials（跨域传递 cookie）
跨域上传中如果需要传递 cookie 需设置 withCredentials

editor.customConfig.withCredentials = true
自定义 timeout 时间
默认的 timeout 时间是 10 秒钟

// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 3000
监听函数
可使用监听函数在上传图片的不同阶段做相应处理

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 格式字符串！！！否则报错
    }
    }
}

自定义提示方法
上传图片的错误提示默认使用alert弹出，你也可以自定义用户体验更好的提示方式

editor.customConfig.customAlert = function (info) {
    // info 是需要提示的内容
    alert('自定义提示：' + info)
}

自定义上传图片事件
如果想完全自己控制图片上传的过程，可以使用如下代码

editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中选中的文件列表
    // insert 是获取图片 url 后，插入到编辑器的方法
    // 上传代码返回结果之后，将图片插入到编辑器中
    insert(imgUrl)
}

富文本框的具体使用

<!-- 下面的富文本编辑器为菜单与内容区分离 -->
<div id="div1" class="toolbar"></div>
<div ref="editor" id="div2" class="text"></div>

import E from 'wangeditor';

在mounted函数里面添加以下代码

var editor = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器
 // 配置服务器端地址
 editor.customConfig.uploadImgServer = this.baseUrl + '/api/file/upload';
 // 自定义菜单配置
 editor.customConfig.zIndex = 10;
 editor.customConfig.uploadImgMaxLength = 1;
 //设置头部
 editor.customConfig.uploadImgHeaders = {
     "Authorization": getToken()
 };
 editor.customConfig.uploadFileName = 'file';
 editor.customConfig.uploadImgHooks = {
     before: function (xhr, editor, files) {
         // 图片上传之前触发
         // console.log(files);
     },
     success: function (xhr, editor, result) {
         // console.log(result);
     },
     customInsert: function (insertImg, result, editor) {
         var url = result.data.url
         insertImg(url);
     }
 }
 editor.customConfig.onchange = (html) => {
     this.editorContent = html;
 }
 editor.create()
 // 初始化数据
 editor.txt.html(this.obj.content);

富文本框内容校验

checkEditor(str) {
   if (!str) {
       return;
   }
   // str = str.replace(/</?[^>]*>/g, ''); //去除HTML tag
   str = str.replace(/[ | ]*n/g, 'n'); //去除行尾空白
   // str = str.replace(/[ ]|[&nbsp;]/g, '');//去除&nbsp;
   // str = str.replace(/ /ig, '');//去掉 
   // console.log(str);
   return str;
}

文本内容去除首尾空格

str = str.replace(/[ | ]*n/g, 'n'); //去除行尾空白

最后

以上就是曾经铅笔为你收集整理的wangEditor富文本框的使用的全部内容，希望文章能够帮你解决wangEditor富文本框的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。