A

package.json

@@ -13,6 +13,8 @@
     "@chenfengyuan/vue-qrcode": "^1.0.1",
     "@chenfengyuan/vue-qrcode": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "@riophae/vue-treeselect": "0.4.0",
     "@sscfaith/avue-form-design": "1.3.12",
     "@sscfaith/avue-form-design": "1.3.12",
+    "@wangeditor/editor": "^5.1.0",
+    "@wangeditor/editor-for-vue": "^1.0.1",
     "ali-oss": "^6.17.1",
     "ali-oss": "^6.17.1",
     "avue-plugin-ueditor": "^0.1.4",
     "avue-plugin-ueditor": "^0.1.4",
     "axios": "^0.18.0",
     "axios": "^0.18.0",

src/components/ckeditor/index.vue

+<template>
+  <div style="border: 1px solid #ccc;">
+    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
+    <Editor style="height: 300px; overflow-y: hidden;"
+      v-model="html"
+      :defaultConfig="editorConfig"
+      :mode="mode"
+      @onChange="onChange"
+      @onCreated="onCreated" />
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+  import "@wangeditor/editor/dist/css/style.css"
+
+  export default Vue.extend({
+      components: { Editor, Toolbar },
+      props: {
+        content: String
+      },
+      data() {
+          return {
+              editor: null,
+              html: '',
+              toolbarConfig: { },
+              editorConfig: {
+                placeholder: '请输入内容...' ,
+                MENU_CONF: {
+                  uploadImage: {
+                    async customUpload(file, insertFn) {
+                      let r = await UPLOADER.upload('images', file)
+                      insertFn(r.url, '', r.url)
+                    }
+                  }
+                }
+              },
+              mode: 'default', // or 'simple'
+          }
+      },
+      watch: {
+        content(n, o) {
+          if(n != o) {
+            this.html = this.content
+          }
+        }
+      },
+      created() {
+        if(this.content && this.content.length > 0) {
+          this.html = this.content
+        }
+      },
+      methods: {
+          onCreated(editor) {
+            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+          },
+          onChange(editor) {
+            //console.log(editor.getHtml())
+            this.$emit('changed', editor.getHtml())
+          }
+      },
+      mounted() {
+          this.html = this.content
+      },
+      beforeDestroy() {
+          if(this.editor) {
+            const editor = this.editor
+            if (editor == null) return
+            editor.destroy() // 组件销毁时，及时销毁编辑器
+          }
+      }
+  })
+</script>
+
+<style>
+
+</style>