wangEditor3——在vue中应用并开发插件的小实践

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统，wangEditor3做为其中的富文本编辑器
需求：在富文本中插入自定义样式的卡片

最终效果：
step1：在引入编辑器中的菜单栏插入插件的图标,并撰写样式
step2:在编辑区域中写入插件弹窗，并撰写样式
wangeditor.vue

<div class='editor'>
    
    <div ref='toolbar' class='toolbar'> <!--菜单栏 -->
      <span><a-icon type='shopping-cart' /></span> <!-- 图标 --!>      
    </div>
  
    <div ref='editor' class='text'> <!-- 编辑区 --!>
      <div>
         /**
         ...
         弹窗的代码
         **/
      </div>
    </div>
  </div>

step3：撰写业务功能代码（此处就由自行发挥啦~）
step4：撰写触发内容添加入编辑器的代码（我的案例中是点击“确定”触发）

methods: {
 submit(){
     // 业务代码
     ...
      // 最重要↓调用editor中的该方法（"inserHTML",'(卡片的HTML代码)'）
     this.editor.cmd.do(
                "insertHTML",
                '<div class="goodsBox"><img class="goodsImg" src="' +
                  info.mainImage +
                  '" /><span class="goodsInfo"><span class="goodsTitle">' +
                  info.title +
                  '</span><span class="goodsPrice">￥' +
                  info.price +
                  '</span></span>  </div>'
              );
 }
}