富文本使用wangEditor，vue中的使用方法

wangEditor官网：http://www.wangeditor.com/index.html
注：请先熟悉使用wangEditor，在开始在vue中使用，这样更加快捷应用
首先先进行下载
npm install wangeditor
在使用的页面中，按照如下方法使用
这样就完成了在vue中的使用了。无需别的操作了

<template>
    <div>
        <div ref="editor" style="text-align:left" class="textBox">
          <p>嘴上说着爱你，心里骂你傻逼</p>
        </div>
        <button v-on:click="getContent">查看内容</button>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {
      data () {
        return {
          editorContent: '',
          editor:null
        }
      },
      methods: {
        getContent: function () {
            // alert(this.editorContent)
          var json = this.editor.txt.getJSON()  // 获取 JSON 格式的内容
          var jsonStr = JSON.stringify(json)
          console.log(json)
          console.log(jsonStr)
          console.log(this.editorContent,'----------------------')
        }
      },
      mounted() {
        this.editor = new E(this.$refs.editor)
        this.editor.customConfig.onchange = (html,a) => {
        // console.log(html,'----------------',a)
          this.editorContent = html
        }
        // this.editor.customConfig.uploadImgShowBase64 = true // 使用base64保存图片  上下两者不可同用
        this.editor.customConfig.uploadImgServer = 'http://chuantu.xyz/'  // 上传图片到服务器
        // 隐藏“网络图片”tab
        this.editor.customConfig.showLinkImg = false
        this.editor.create()
      }
    }
</script>

<style scoped>
</style>

官网中的api文档重点介绍

基础使用
<!DOCTYPE html>
<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>

-----------------------最基础----------------------
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<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>

// 禁用编辑功能
editor.$textElem.attr('contenteditable', false)

// 开启编辑功能
editor.$textElem.attr('contenteditable', true)

//设置内容
editor.txt.html(...)
//追加内容
editor.txt.html(...)
//清空内容
editor.txt.clear()
--------------读取内容---------------
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
alert(editor.txt.html())
}, false)

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

-------------------vue中读取带标签的内容mounted() {}中操作----------------
editor.customConfig.onchange = (html) => {
//监控变化，同步更新到text area
this.editorContent = html //带标签的内容html赋值得data中的变量editorContent
}
-------------------------自定义菜单-------------------------
// 自定义菜单配置
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
]
//默认菜单
[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
-----------------debug模式---------------------
// 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0

用户自己使用 JS 修改了div1的innerHTML，不会自动触发onchange函数，此时你可以通过执行editor.change()来手动触发onchange函数的执行。
editor.customConfig.onchange = function (html) {
// html 即变化之后的内容
console.log(html)
}
editor.create()

document.getElementById('btn1').addEventListener('click', function () {
    // 如果未配置 editor.customConfig.onchange，则 editor.change 为 undefined
    editor.change && editor.change()
})

--------------------配置编辑区域的z-index----------------
editor.customConfig.zIndex = 100

// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true
// 自定义处理粘贴的文本内容
editor.customConfig.pasteTextHandle = function (content) {
    // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
    return content + '<p>在粘贴内容后面追加一行</p>'
}

-------------网络图片------------
--------插入网络图片的回调
editor.customConfig.linkImgCallback = function (url) {
console.log(url) // url 即插入图片的地址
}
--------插入链接的校验
editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接

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

}
--------插入网络图片的校验
editor.customConfig.linkImgCheck = function (src) {
console.log(src) // 图片的链接

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

}
-----------用户点击富文本区域会触发onfocus
editor.customConfig.onfocus = function () {
console.log("onfocus")
}
-----------手动获取焦点的富文本并且鼠标点击富文本以外的区域，则会触发onblur函数执行
editor.customConfig.onblur = function (html) {
// html 即编辑器中的内容
console.log('onblur', html)
}

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

// 表情面板可以有多个 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: ['??', '??', '??', '??', '??']
}
]

// 自定义字体
editor.customConfig.fontNames = [
    '宋体',
    '微软雅黑',
    'Arial',
    'Tahoma',
    'Verdana'
]

------------------------------------------上传图片-服务器---------------------
上传图片
参考如下代码

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

}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345