富文本编辑器

1.下载富文本插件
npm install @wangeditor/editor-for-vue --save --legacy-peer-deps

2.封装的组件editor1

<template>
  <div style="border: 1px solid #ccc" class="relative">
    <div v-if="disabled" class="disable-layer" />
    <Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor style="overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
  </div>
</template>
 
<script>
// 引入包
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 上传文件的接口
import { videoApi } from '@/api/video'
// 引入wangeditor/editor-for-vue的样式
import '@wangeditor/editor/dist/css/style.css'
// 上传文件的路径前缀
import { baseUrl } from '@/utils/pictureUrl'
export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  props: {
    value: String,
    disabled: Boolean,
    cusHeight: {
      type: String,
      default: '150px'
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      // wangeditor/editor-for-vue的配置
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'underline',
          'italic',
          'through',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'justifyJustify',
          'lineHeight',
          'header1',
          'header2',
          'header3',
          'header4',
          'header5',
          'bulletedList',
          'numberedList',
          'uploadImage'
          // "uploadVideo"
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
              videoApi.uploadImg(file).then(response => {
                if (response.result == 1) {
                  const url = baseUrl + response.msg
                  // 将图片插入到文本框中
                  insertFn(url)
                }
              })
            }
          }
          // uploadVideo: {
          //   // 自定义图片上传
          //   async customUpload(file, insertFn) {
          //     uploadFile('', file).then(response => {
          //       const url = response.data
          //       insertFn(this.$getFilePath(url))
          //     })
          //   }
          // }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {},
  created() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('this.editor :>> ', this.editor.getAllMenuKeys());
    },
    handleInput(value) {
      console.log(value)
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
  }
}
</script>
 
<style lang="scss" scoped>
.disable-layer {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0.5;
}
</style>

组件2

<template>
  <div>
    <el-card>
      <myEditor :value="initForm.content" @input="input" />
    </el-card>
  </div>
</template>

<script>
// import editorVue from "@/api/editor.vue" ;
export default {
  name: 'editorNew',
  props: {
    msg: String
  },
  // components: { editorVue },
  data() {
    return {
      initForm: {
        content: '',
        plateId: 5,
        id: ''
      },
    };
  },
  methods: {
    // 将myEditor富文本传过来的content文本内容进行存储
    input(value) {
      // console.info('*****value*****', value)
      this.initForm.content = value
    },

  }
};
</script>
<!--<script>-->
<!--export default {-->
<!--  // components: { scannModal },-->
<!--  name: "addNode",-->
<!--  data() {-->
<!--    return {-->
<!--      dialogVisible: false-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleClose(done) {-->
<!--      this.$confirm('确认关闭？')-->
<!--          .then(_ => {-->
<!--            done();-->
<!--          })-->
<!--          .catch(_ => {});-->
<!--    }-->
<!--  },-->
<!--  beforeDestroy(){-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped>
/deep/.w-e-toolbar{
  background: #21492a;
}
/deep/.w-e-text-container{
  background: #3e8b4c;
  color: #fff;
}
/deep/.el-card__body{
  padding: 0px;

}
/deep/.w-e-text-container .w-e-scroll {
  height: 495px;
}


/deep/.el-card{
  border: none;
  border-radius: 0px;
}
/deep/.w-e-bar-item button:hover {
  background-color: #3e8b4c;
  color: #fff;
}
/deep/.w-e-bar-item button{
  color: #fff;
}
/deep/.w-e-bar svg {
  /*fill: var(--w-e-toolbar-color);*/
  height: 14px;
  width: 14px;
  fill: #fff;
}
/deep/.w-e-bar-item .disabled svg{
  fill: #fff;
}
/deep/.w-e-hover-bar {
  display: none;
}

/deep/.w-e-bar-item .active {
  background-color: #3e8b4c;
  color: #fff;
}
</style>

3.main.js引入文件

import myEditor from '@/components/myEditor/CusWangEditor.vue'
Vue.component('myEditor', myEditor)

4.父级引用富文本编辑器

<editor-vue ref="outlineEditor" v-loading="loadingOutline"
                        element-loading-background="rgba(0, 0, 0, 0.3)"></editor-vue>


import editorVue from "@/views/ykzmdmxDir/editorNew.vue";


this.$refs.outlineEditor.initForm.content = '' //输入框内容