轻量级富文本编辑器wangEditor结合vue使用方法示例
程序员文章站
2022-06-23 23:12:19
1、安装
使用npm下载: `npm install wangeditor`
2、 创建实例
(1)基本用法:
...
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') editor.customconfig.onchange = (html) => { this.formarticle.content = html } editor.create() } } </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') editor.customconfig.onchange = (html) => { this.formarticle.content = html } editor.create() } } </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" style="text-align:left"></div> </div> </template> <script> import e from 'wangeditor' export default { name: 'editorelem', data () { return { editorcontent: '', } }, props:['catchdata'], //接收父组件的方法 mounted() { var editor = new e(this.$refs.editorelem) //创建富文本实例 editor.customconfig.onchange = (html) => { this.editorcontent = html this.catchdata(html) //把这个html通过catchdata的方法传入父组件 } editor.customconfig.uploadimgserver = '你的上传图片的接口' editor.customconfig.uploadfilename = '你自定义的文件名' editor.customconfig.uploadimgheaders = { 'accept': '*/*', 'authorization':'bearer ' + token //头部token } editor.customconfig.menus = [ //菜单配置 '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 格式字符串!!!否则报错 } } editor.create() },
父组件中
<template> <div id="father"> <wangeditor :catchdata="catchdata"></wangeditor> </div> </template> <script> import wangeditor from './wangeditor' data(){ return{ content:"" } }, methods:{ catchdata(value){ this.content=value //在这里接受子组件传过来的参数,赋值给data里的参数 } }, components: { wangeditor }, </script>
上面字最多的地方好好看清楚,只有做了custominsert: function (insertimg, result, editor){}里的步骤,图片才会在富文本中显示,否则是不会自动显示。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 网易云音乐黑胶时光机在哪?网易云音乐黑胶时光机介绍
下一篇: 高...高精度!!!