• wangEditor官网看了一下，介绍的很详细，下面就来看看再下是如何实现的，由于刚刚开始用，目前功能不太多，只是实现了如何将其渲染出来，以及获取其富文本编辑器的值。（顺便提一下，wangeditor富文本编辑器对html内容支持还是很不错，有兴趣的小伙伴可以去试试）。">在新的后台管理项目中由于需要对文章、商品进行一些相关编辑，于是加入了富文本编辑器，最先是用了vue-quill-editor，发现界面有点难看，后来换ckeditor，试了好几个npm包，后来没有实现:( 全是泪，后来想起之前一个网友推荐的wangEditor这个编辑器，在wangEditor官网看了一下，介绍的很详细，下面就来看看再下是如何实现的，由于刚刚开始用，目前功能不太多，只是实现了如何将其渲染出来，以及获取其富文本编辑器的值。（顺便提一下，wangeditor富文本编辑器对html内容支持还是很不错，有兴趣的小伙伴可以去试试）。
  • 1.首先npm install wangeditor安装下wangeditor

在新的后台管理项目中由于需要对文章、商品进行一些相关编辑，于是加入了富文本编辑器，最先是用了vue-quill-editor，发现界面有点难看，后来换ckeditor，试了好几个npm包，后来没有实现:( 全是泪，后来想起之前一个网友推荐的wangEditor这个编辑器，在wangEditor官网看了一下，介绍的很详细，下面就来看看再下是如何实现的，由于刚刚开始用，目前功能不太多，只是实现了如何将其渲染出来，以及获取其富文本编辑器的值。（顺便提一下，wangeditor富文本编辑器对html内容支持还是很不错，有兴趣的小伙伴可以去试试）。

如何应用到自己的项目中去看开发者文档，很详细，这里不多做介绍
为了能够实现组件的复用，我是讲editor封装成了一个独立的组件，
实现如下： 

  1. <template>
  2.    <div id="wangeditor">
  3.        <div ref="editorElem" style="text-align:left"></div>
  4.    </div>  
  5. </template>
  6. <script>
  7.    import E from 'wangeditor'
  8.    export default {
  9.      name: 'editorElem',
  10.      data () {
  11.        return {
  12.          editor: null,
  13.          editorContent: ''
  14.        }
  15.      },
  16.      props: ['catchData', 'content'],    // 接收父组件的方法
  17.      watch: {
  18.        content () {
  19.          this.editor.txt.html(this.content)
  20.        }
  21.      },
  22.      mounted () {
  23.        this.editor = new E(this.$refs.editorElem)
  24.        this.editor.customConfig.onchange = (html) => {
  25.          this.editorContent = html
  26.          this.catchData(this.editorContent)  // 把这个html通过catchData的方法传入父组件
  27.        }
  28.        this.editor.customConfig.uploadImgServer = '你的上传图片的接口'
  29.        this.editor.customConfig.uploadFileName = '你自定义的文件名'
  30.        this.editor.customConfig.menus = [          // 菜单配置
  31.          'head',  // 标题
  32.          'bold',  // 粗体
  33.          'fontSize',  // 字号
  34.          'fontName',  // 字体
  35.          'italic',  // 斜体
  36.          'underline',  // 下划线
  37.          'strikeThrough',  // 删除线
  38.          'foreColor',  // 文字颜色
  39.          'backColor',  // 背景颜色
  40.          'link',  // 插入链接
  41.          'list',  // 列表
  42.          'justify',  // 对齐方式
  43.          'quote',  // 引用
  44.          'emoticon',  // 表情
  45.          'image',  // 插入图片
  46.          'table',  // 表格
  47.          'code',  // 插入代码
  48.          'undo',  // 撤销
  49.          'redo'  // 重复
  50.        ]
  51.                          // 下面是最重要的的方法
  52.        this.editor.customConfig.uploadImgHooks = {
  53.          before: function (xhr, editor, files) {
  54.                      // 图片上传之前触发
  55.                      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
  57.                      // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
  58.                      // return {
  59.                      //     prevent: true,
  60.                      //     msg: '放弃上传'
  61.                      // }
  62.          },
  63.          success: function (xhr, editor, result) {
  64.                      // 图片上传并返回结果，图片插入成功之后触发
  65.                      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  66.            this.imgUrl = Object.values(result.data).toString()
  67.          },
  68.          fail: function (xhr, editor, result) {
  69.                      // 图片上传并返回结果，但图片插入错误时触发
  70.                      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  71.          },
  72.          error: function (xhr, editor) {
  73.                      // 图片上传出错时触发
  74.                      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  75.          },
  76.          timeout: function (xhr, editor) {
  77.                      // 图片上传超时时触发
  78.                      // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  79.          },
  81.                  // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
  82.                  // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
  83.          customInsert: function (insertImg, result, editor) {
  84.                      // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
  85.                      // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
  87.                      // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
  88.            let url = Object.values(result.data)      // result.data就是服务器返回的图片名字和链接
  89.            JSON.stringify(url)    // 在这里转成JSON格式
  90.            insertImg(url)
  91.                      // result 必须是一个 JSON 格式字符串！！！否则报错
  92.          }
  93.        }
  95.        this.editor.create()     // 创建富文本实例
  96.        if (!this.content) {
  97.          this.editor.txt.html('请编辑内容1')
  98.        }
  99.      }
  100.    }
  101. </script>
  102. <style lang="scss" rel="stylesheet/scss">
  103.    #wangeditor {
  104.      width: 50rem;
  105.    }  
  106. </style>

然后在父组件中import，如下：
1.png
1. import
2. components 中注册组件
3. 在模板中渲染：

  1. <editor :catchData="catchData" :content="ruleForm.info.description"></editor>

这里用props 项子组件editor传了一个catchData函数，在methods中定义，用于在父组件中获取editor中的内容，一个content作为初始化的数据（此处是从服务器获取的文章详情，效果是当请求完成将详情展示到editor中实现可编辑）

2.png

需要注意的是：我遇到是的不知如何在父组件中传值给子组件然后在editor中展示出来，现在用的是props传值到子组件，然后用watch监听content的变化，如果content接收到，则通过editor.txt.html(this.content)来改变editor中的内容，（用watch的原因是由于数据请求可能是延时，子组件不能及时获取到content，通过watch则可以在获取到的时候改变内容）。在查看此文章请与官方文档对比，特别是最后一张图片中红箭头标出的this，这是修改之后的。
望大家工作顺利:) !!!

1.首先npm install wangeditor安装下wangeditor

2、components文件里引用下组件

  1. 为了能够实现组件的复用，我是讲editor封装成了一个独立的组件，
  2. 实现如下：
  3. <template>
  4.     <div id="wangeditor">
  5.         <div ref="editorElem" style="text-align:left"></div>
  6.     </div>  
  7. </template>
  8. <script>
  9. import E from 'wangeditor'
  10. export default {
  11.   name: 'editorElem',
  12.   data () {
  13.     return {
  14.       editor: null,
  15.       editorContent: ''
  16.     }
  17.   },
  18.   props: ['catchData', 'content'],    // 接收父组件的方法
  19.    props:{
  20.         content:{
  21.             type:String,
  22.             required:false
  23.         }
  24.       },
  26.   watch: {
  27.     content () {
  28.       this.editor.txt.html(this.content)
  29.     }
  30.   },
  31.   mounted () {
  32.     this.editor = new E(this.$refs.editorElem)
  33.     this.editor.customConfig.onchange = (html) => {
  34.       this.editorContent = html
  35.       this.catchData(this.editorContent)  // 把这个html通过catchData的方法传入父组件
  36.     }
  37.     this.editor.customConfig.uploadImgServer = '你的上传图片的接口'
  38.     this.editor.customConfig.uploadFileName = '你自定义的文件名'
  39.     this.editor.customConfig.menus = [          // 菜单配置
  40.       'head',  // 标题
  41.       'bold',  // 粗体
  42.       'fontSize',  // 字号
  43.       'fontName',  // 字体
  44.       'italic',  // 斜体
  45.       'underline',  // 下划线
  46.       'strikeThrough',  // 删除线
  47.       'foreColor',  // 文字颜色
  48.       'backColor',  // 背景颜色
  49.       'link',  // 插入链接
  50.       'list',  // 列表
  51.       'justify',  // 对齐方式
  52.       'quote',  // 引用
  53.       'emoticon',  // 表情
  54.       'image',  // 插入图片
  55.       'table',  // 表格
  56.       'code',  // 插入代码
  57.       'undo',  // 撤销
  58.       'redo'  // 重复
  59.     ]
  60.                       // 下面是最重要的的方法
  61.     this.editor.customConfig.uploadImgHooks = {
  62.       before: function (xhr, editor, files) {
  63.                   // 图片上传之前触发
  64.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
  66.                   // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
  67.                   // return {
  68.                   //     prevent: true,
  69.                   //     msg: '放弃上传'
  70.                   // }
  71.       },
  72.       success: function (xhr, editor, result) {
  73.                   // 图片上传并返回结果，图片插入成功之后触发
  74.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  75.         this.imgUrl = Object.values(result.data).toString()
  76.       },
  77.       fail: function (xhr, editor, result) {
  78.                   // 图片上传并返回结果，但图片插入错误时触发
  79.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  80.       },
  81.       error: function (xhr, editor) {
  82.                   // 图片上传出错时触发
  83.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  84.       },
  85.       timeout: function (xhr, editor) {
  86.                   // 图片上传超时时触发
  87.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  88.       },
  90.               // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
  91.               // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
  92.       customInsert: function (insertImg, result, editor) {
  93.                   // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
  94.                   // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
  96.                   // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
  97.         let url = Object.values(result.data)      // result.data就是服务器返回的图片名字和链接
  98.         JSON.stringify(url)    // 在这里转成JSON格式
  99.         insertImg(url)
  100.                   // result 必须是一个 JSON 格式字符串！！！否则报错
  101.       }
  102.     }
  104.     this.editor.create()     // 创建富文本实例
  105.     if (!this.content) {
  106.       this.editor.txt.html('请编辑内容1')
  107.     }
  108.   }
  109. }
  110. </script>
  111. <style lang="scss" rel="stylesheet/scss">
  112.     #wangeditor {
  113.       width: 50rem;
  114.     }  
  115. </style>

3、引用

  1. <template>
  2.   <div>
  3.       <div id="toolbar" class="toolbar"></div>
  4.       <div style="padding: 1px 0; background-color: #ccc"></div>
  5.       <div id="editor" class="text" style="min-height:400px;border:1px solid #ddd;"> 
  6.         <!--可使用 min-height 实现编辑区域自动增加高度-->
  7.       </div>
  8.   </div>
  9. </template>
  10. <script>
  11.     import E from 'wangeditor'
  12.     export default {
  13.       name: 'Editor',
  14.       data () {
  15.         return {
  16.           editorContent: ''
  17.         }
  18.       },
  19.       props:{
  20.         content:{
  21.           type:String,
  22.           required:false
  23.         }
  24.       },
  25.       methods: {
  26.         getContent: function () {
  27.           this.content=this.editorContent;
  28.         }
  29.       },
  30.       mounted() {
  31.         var editor = new E("#toolbar","#editor")
  32.         editor.customConfig.uploadImgShowBase64 = true ;
  33.         editor.customConfig.onchange = (html) => {
  34.           this.editorContent = html
  35.         }
  36.         editor.create()
  37.         editor.txt.html(this.content);
  38.       }
  39.     }
  40. </script>
  42. <style scoped>
  43. </style>
  1. <editor :content="infoForm.articleContent" :getFullText="changeEditor" 
  2.                 v-bind:content="editForm.content"></editor>
  4. //import Editor from "@/components/Editor";
  6. <script>
  7. import EditorBar from '../../components/Editor.vue';
  9. export default {
  10.     components: { EditorBar },
  11.     data() {
  12.         return {
  13.             isClear: false,
  14.             articleContent:''
  15.         }
  16.     },  
  17.     methods: {
  18.         change(val) {
  19.             // console.log(val)
  20.             this.goods.detail = val
  21.         },
  22.     }
  23. }
  24. </script>

方法二（夭折）

  2. <template>
  3.     <div id="wangeditor">
  4.         <div ref="editorElem" style="text-align:left"></div>
  5.     </div>  
  6. </template>
  7. <script>
  8. import E from 'wangeditor'
  9. export default {
  10.   name: 'editorElem',
  11.   data () {
  12.     return {
  13.       editor: null,
  14.       editorContent: ''
  15.     }
  16.   },
  17.   props: ['catchData', 'content'],    // 接收父组件的方法
  18.   watch: {
  19.     content () {
  20.       this.editor.txt.html(this.content)
  21.     }
  22.   },
  23.   mounted () {
  24.     this.editor = new E(this.$refs.editorElem)
  25.     this.editor.customConfig.onchange = (html) => {
  26.       this.editorContent = html
  27.       this.catchData(this.editorContent)  // 把这个html通过catchData的方法传入父组件
  28.     }
  29.     this.editor.customConfig.uploadImgServer = '你的上传图片的接口'
  30.     this.editor.customConfig.uploadFileName = '你自定义的文件名'
  31.     this.editor.customConfig.menus = [          // 菜单配置
  32.       'head',  // 标题
  33.       'bold',  // 粗体
  34.       'fontSize',  // 字号
  35.       'fontName',  // 字体
  36.       'italic',  // 斜体
  37.       'underline',  // 下划线
  38.       'strikeThrough',  // 删除线
  39.       'foreColor',  // 文字颜色
  40.       'backColor',  // 背景颜色
  41.       'link',  // 插入链接
  42.       'list',  // 列表
  43.       'justify',  // 对齐方式
  44.       'quote',  // 引用
  45.       'emoticon',  // 表情
  46.       'image',  // 插入图片
  47.       'table',  // 表格
  48.       'code',  // 插入代码
  49.       'undo',  // 撤销
  50.       'redo'  // 重复
  51.     ]
  52.                       // 下面是最重要的的方法
  53.     this.editor.customConfig.uploadImgHooks = {
  54.       before: function (xhr, editor, files) {
  55.                   // 图片上传之前触发
  56.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
  58.                   // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
  59.                   // return {
  60.                   //     prevent: true,
  61.                   //     msg: '放弃上传'
  62.                   // }
  63.       },
  64.       success: function (xhr, editor, result) {
  65.                   // 图片上传并返回结果，图片插入成功之后触发
  66.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  67.         this.imgUrl = Object.values(result.data).toString()
  68.       },
  69.       fail: function (xhr, editor, result) {
  70.                   // 图片上传并返回结果，但图片插入错误时触发
  71.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
  72.       },
  73.       error: function (xhr, editor) {
  74.                   // 图片上传出错时触发
  75.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  76.       },
  77.       timeout: function (xhr, editor) {
  78.                   // 图片上传超时时触发
  79.                   // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
  80.       },
  82.               // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
  83.               // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
  84.       customInsert: function (insertImg, result, editor) {
  85.                   // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
  86.                   // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
  88.                   // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
  89.         let url = Object.values(result.data)      // result.data就是服务器返回的图片名字和链接
  90.         JSON.stringify(url)    // 在这里转成JSON格式
  91.         insertImg(url)
  92.                   // result 必须是一个 JSON 格式字符串！！！否则报错
  93.       }
  94.     }
  96.     this.editor.create()     // 创建富文本实例
  97.     if (!this.content) {
  98.       this.editor.txt.html('请编辑内容1')
  99.     }
  100.   }
  101. }
  102. </script>
  103. <style scoped>
  104.     #wangeditor {
  105.         width: 50rem;
  106.     }  
  108. </style>