element ui 中添加wangeditor编辑器

1. 我们打开链接: npm包管理网站.
2. 打开cmd命令行或者bash工具 ,如果你是windows下载node的msi自动配置好环境变量,linux的话直接百度

   //输入 npm i wangeditor 下载wangeditor
    npm i wangeditor 
   

3. 我们找到element ui 的componets文件夹创建Wangeditor的文件夹,在Wangeditor下创建index.vue.如图所示
   

compoents

Wangeditor

index.vue

4. index.vue中加入代码块 下面展示一些 index.vue全部内容,复制即可。

// An highlighted block
<template>
    <div>
        <div ref="editor"   :id="id" :style="styleObject" ></div>
    </div>
  
</template>
 
<script>
    import E from 'wangeditor'
    // const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E

    export default {
      name: 'editor',
      props: ['id', 'value', 'width', 'height', 'uploadImgUrl', 'disabled', 'menus', 'mapKey', 'menuFixed', 'pasteFilter', 'codeDefaultLang', 'hideLinkImg', 'uploadParams', 'uploadHeaders', 'isRealtime', 'disabledMenus','uploadVideoServer'],
      data () {
        return {
          styleObject: {
            width:this.width,
            height: this.height
          },
          editor: null
        }
      },
      methods: {
      createEditor() {
        // if (!document.getElementById(this.id)) {
        //   setTimeout(() => {
        //     console.log(11)
        //     this.createEditor(this.id)
        //   }, 100)
        //   return
        // }
        let _this  = this
        this.editor = new E(this.$refs.editor)
        this.editor.config.pasteFilter = false
        this.editor.config.width = this.width
        this.editor.config.height = this.height
        this.editor.config.uploadImgServer  = this.uploadImgUrl//配置上传地址
        this.editor.config.uploadImgHeaders = this.uploadHeaders //配置header头
        this.editor.config.uploadFileName  = 'image'//配置上传参数
        this.editor.config.showLinkImg = true //隐藏插入网络图片
        this.editor.config.uploadImgShowBase64 = true//开启64位上传
        this.editor.config.uploadImgTimeout =  5 * 1000//配置上传超时时间
        this.editor.config.uploadImgHooks = {
          // 图片上传并返回了结果，图片插入已成功
          success: function(xhr) {
              console.log('success', xhr)
          },
          // 图片上传并返回了结果，但图片插入时出错了
          fail: function(xhr, editor, resData) {
              console.log('fail', resData)
          },
          // 上传图片出错，一般为 http 请求的错误
          error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
          },
          // 上传图片超时
          timeout: function(xhr) {
              console.log('timeout')
          },
          // 图片上传并返回了结果，想要自己把图片插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
          customInsert: function(insertImgFn, result) {
              // result 即服务端返回的接口
              // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
              insertImgFn(result.data)
          }
        }
        //上传视频配置
        this.editor.config.uploadVideoServer = this.uploadVideoServer
        this.editor.config.uploadVideoHeaders = this.uploadHeaders
        this.editor.config.uploadVideoName  = 'file'
        this.editor.config.showLinkVideo = true //显示插入网络视频

        this.editor.config.uploadVideoHooks = {
          // 视频上传并返回了结果，视频插入已成功
          success: function(xhr) {
              console.log('success', xhr)
          },
          // 视频上传并返回了结果，但视频插入时出错了
          fail: function(xhr, editor, resData) {
              console.log('fail', resData)
          },
          // 上传视频出错，一般为 http 请求的错误
          error: function(xhr, editor, resData) {
              console.log('error', xhr, resData)
          },
          // 上传视频超时
          timeout: function(xhr) {
              console.log('timeout')
          },

          // 视频上传并返回了结果，想要自己把视频插入到编辑器中
          // 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
          customInsert: function(insertVideoFn,result) {
          //     // result 即服务端返回的接口
          //     // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
          //     // insertVideoFn(result.data)
                // insertVideoFn(result.data)
             // _this.editor.cmd.do('insertHTML',`<p><video src="${result.data}" style="max-width:100%" controls="controls"></video>视频</p>`)
                _this.editor.cmd.do('insertHTML',`<p><iframe src="${result.data}" frameborder='0' allow='autoplay;encrypted-media' allowfullscreen style='width:300px;height:200px;'></iframe></p>`)

               

          }
        }



        if (this.mapKey != undefined) {
          // 配置地图key，默认空
          this.editor.config.mapAk = this.mapKey
        }
        if (this.menus != undefined && this.menus instanceof Array && this.menus.length) {
          // 配置菜单，默认全部，对source进行过滤
          this.editor.config.menus = this.filterMenu(this.menus)
        } else if (this.disabledMenus) {
          // 禁用菜单
          this.editor.config.menus = this.filterDisabledMenu(wangEditor.config.menus, this.disabledMenus)
        } else {
          this.editor.config.menus = this.filterMenu(wangEditor.config.menus)
        }
        if (this.menuFixed != undefined) {
          // 配置菜单栏吸顶，默认true
          this.editor.config.menuFixed = this.menuFixed
        }
        if (this.pasteFilter != undefined) {
          // 配置粘贴过滤，默认为false
          this.editor.config.pasteFilter = this.pasteFilter
        }
        if (this.codeDefaultLang != undefined) {
          // 默认代码类型，默认javascript
          this.editor.config.codeDefaultLang = this.codeDefaultLang
        }
      
        this.editor.create()
        if (this.value) {
          this.setHtml(this.value)
        }
        if (this.disabled) {
          this.disable()
        }
        this.listenChange()
      },
      // 筛选编辑器菜单
      filterMenu(menus) {
        if (menus instanceof Array) {
          return menus.map((item, key) => {
            if (item === 'source') {
              return null
            }
            return item
          })
        }
      },
      // 筛选不可用菜单
      filterDisabledMenu(menus, disabledMenus) {
        let menusToString = menus.join(',')
        disabledMenus.forEach((res) => {
          menusToString = menusToString.replace(res, '').replace(',,', ',')
        })
        if (menusToString.length && menusToString[0] == ',') {
          menusToString.substr(1, menusToString.length)
        }
        return menusToString.split(',')
      },
      insertImg(url) {
        this.editor.command(null, 'insertHtml', '<img src=' + url + ' style="max-width:100%;"/>')
      },
      
      // 获取内容(html)
      getHtml() {
        return this.editor.txt.html()
      },
      // 获取内容(纯文本)
      getText() {
        return this.editor.txt.text()
      },
      // 设置内容(html)
      setHtml(text) {
        this.editor.txt.html(text)
      },
      // 追加内容(html)
      appendHtml(text) {
        this.editor.txt.append(text)
      },
      // 清空内容
      clear() {
        this.editor.clear()
      },
      // 启用编辑器
      enable() {
        this.editor.enable()
      },
      // 禁用编辑器
      disable() {
        this.editor.disable()
      },
      // 销毁编辑器
      destroy() {
        this.editor.destroy()
      },
      // 恢复编辑器
      undestroy() {
        this.editor.undestroy()
      },
      // 监听内容改变
      listenChange() {
        this.editor.onchange = () => {
          this.$emit('change')
          let result = ''
          if (!this.getText()) {
            result = this.getHtml()
          }
          if (this.isRealtime !== false) {
            this.$emit('input', result)
          }
        }
      },
    
      },
      mounted() {
        this.createEditor()
      //   class AlertMenu extends BtnMenu {
      //       constructor(editor) {
      //         // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
      //           const $elem = E.$(
      //               `<div class="w-e-menu" data-title="excell">
      //                   <i class="el-icon-folder-add"></i>
      //               </div>`
      //           )
      //           super($elem, editor)
      //       }
          
      //       // 菜单点击事件
      //       clickHandler() {
      //           // 做任何你想做的事情
      //           // 可参考【常用 API】文档，来操作编辑器
      //           console.log(this.editor)
      //           console.log(this.editor.toolbarElemId)
            
                
      //       }
      //       // 菜单是否被激活（如果不需要，这个函数可以空着）
      //       // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
      //       // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
      //       tryChangeActive() {
      //           // 激活菜单
      //           // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
      //           // 2. this.this.isActive === true
      //           this.active()
      //           // // 取消激活菜单
      //           // // 1. 菜单 DOM 节点会删掉 .w-e-active
      //           // // 2. this.this.isActive === false
      //           // this.unActive()
      //       }
      // }
      //  const menuKey = 'alertMenuKey' 
      //  E.registerMenu(menuKey, AlertMenu)
      },
      created(){
        

      },
      beforeDestroy() {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    }
    }
</script>

 
<style scoped>


</style>

5. 我们在需要展示的页面开始引入使用,如下 下面是展示页面直接使用的代码id是不需要的，在这里是没用的属性。

// An highlighted block
<editor  :id="forId(details.id)"  class="editor" :uploadImgUrl="uploadImgUrl"  :uploadVideoServer="videoUrl" :uploadHeaders="authorization" ref="editor" v-model="details.remark" :menus="menus"  :width="styleObject1.width" :height="styleObject1.height"></editor>

1. 下面我展示引入方式和配置请一定要在data的components写上name名字这个我就不叙述了
2. 这是menus菜单配置，请参考wangeditor文档
   我提供一份参考代码 这是我的配置可以复制。

// An highlighted block
	authorization: { authorization:'Bearer ' + getToken()},
    uploadImgUrl:process.env.VUE_APP_BASE_API+'/upload/image',
    menus:[
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'todo',
        'justify',
        'quote',
        'image',
        'video',
        ],

8. 以下就是wangeditor在elementui中的使用。如有问题请联系我 效果展示
9. 补充说明 this.$refs.editor.setHtml(this.temp.content)ref可重新设置参数this.temp.content=this.$refs.editor.getHtml() 重新获取编辑器的内容 无需重新clear清除