轻量级富⽂本编辑器wangEditor结合vue使⽤⽅法⽰例1、安装
使⽤npm下载:`npm install wangeditor`
2、创建实例
(1)基本⽤法:
<template>
<div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editor')
hange = (html) => {
t = html
}
}
}
</script>
效果如图
(2)⾃定义⾼度写法如下:把菜单和编辑框分开
<template>
<div>
<div id="editorMenu" class="editorMenu"></div>
<div id="editor" class="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
mounted () {
var editor = new E('#editorMenu', '#editor')
hange = (html) => {
t = html
}
}
}
</script>
<style scoped>
.
editorMenu {
border: 1px solid #ccc;
}
.editor {
margin-top: -1px;//将多出来的⼀像素边框隐藏
border: 1px solid #ccc;
min-height: 400px;//编辑框最⼩⾼度
height:auto;//编辑框⾼度超过最⼩⾼度会根据内容⾼度⾃适应
}
</style>
3、上传图⽚
(1)editor.customConfig.uploadImgShowBase64 = true  // 使⽤ base64 保存图⽚
(2)editor.customConfig.uploadImgServer = '/upload' // 上传服务器端地址
/upload是上传图⽚的服务器端接⼝,接⼝返回的数据格式如下(固定的,否则会取不到图⽚地址):{
// errno 即错误代码,0 表⽰没有错误。
//    如果有错误,errno != 0,可通过下⽂中的监听函数 fail 拿到该错误码进⾏⾃定义处理
"errno": 0,
// data 是⼀个数组,返回若⼲图⽚的线上地址
"data": [
"图⽚1地址",
"图⽚2地址",
"……"
]
}
这些基本就够⽤了。官⽹也写得很详细滴
wangeditor3+vue2.0简单例⼦
把wangeditor作为组件的形式使⽤
⼦组件中
<template>
<div id="wangeditor">
<div ref="editorElem" ></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editorElem',
data () {
return {
editorContent: '',
asp富文本编辑器
}
},
props:['catchData'],  //接收⽗组件的⽅法
mounted() {
var editor = new E(this.$refs.editorElem)    //创建富⽂本实例
hange = (html) => {
this.editorContent = html
this.catchData(html) //把这个html通过catchData的⽅法传⼊⽗组件
}
editor.customConfig.uploadImgServer = '你的上传图⽚的接⼝'
editor.customConfig.uploadFileName = '你⾃定义的⽂件名'
editor.customConfig.uploadImgHeaders = {
'Accept': '*/*',
'Authorization':'Bearer ' + token  //头部token
}
us = [    //菜单配置
'head',
'list', // 列表
'justify', // 对齐⽅式
'bold',
'fontSize', // 字号
'italic',
'underline',
'image', // 插⼊图⽚
'foreColor', // ⽂字颜⾊
'undo', // 撤销
'redo', // 重复
]
//下⾯是最重要的的⽅法
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 是服务器端返回的结果
this.imgUrl=Object.values(result.data).toString()
},
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:'....'} 这种格式,即可这样插⼊图⽚:
let url = Object.values(result.data)  //result.data就是服务器返回的图⽚名字和链接
JSON.stringify(url)  //在这⾥转成JSON格式
insertImg(url)
// result 必须是⼀个 JSON 格式字符串否则报错
}
}
},
⽗组件中
<template>
<div id="father">
<wangeditor :catchData="catchData"></wangeditor>
</div>
</template>
<script>
import wangeditor from './wangeditor'
data(){
return{
content:""
}
},
methods:{
catchData(value){
}
},
components: {
wangeditor
},
</script>
上⾯字最多的地⽅好好看清楚,只有做了customInsert: function (insertImg, result, editor){}⾥的步骤,图⽚才会在富⽂本中显⽰,否则是不会⾃动显⽰。
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。