1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
| <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 } //wangEditor3中菜单栏无法换行显示,如菜单项内容超出则需要对菜单项进行删减 editor.customConfig.menus = [ //菜单配置 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格 'video', // 插入视频 'code', // 插入代码 '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() } } </script>
|