Bootstrap

超详细!在vue 中二次封装 wangEditor 富文本

在vue 中二次封装 wangEditor 富文本

wangEditor真的非常简洁好用,而且一直有更新,缺点就是文档内容比较少。
wangEditor文档链接

看网上很多二次封装都把逻辑放到 mounted 中,对于新手的我不太友好,逻辑不太清晰。决定自己封装一个。将各配置以方法分割,在初始化调用。

//以下是封装的组件 SimpleEditor
<template>
    <div>
        <div ref="editor" style="text-align:left; margin-bottom:20px"></div>
    </div>
</template>

<script>
    import editor from 'wangeditor'

    export default {
   
      name: 'SimpleEditor',
      data () {
   
        return {
   
          editor : ""
        }
      },
      mounted() {
   
        this.$nextTick(function() {
   
          this.initEditor();
        })
      },
      methods : {
   
        initEditor() {
   
          this.editor = new editor(this.$refs.editor)
          this.uploadImg()
;