init

package.json

@@ -46,7 +46,8 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.2",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wangeditor": "^4.7.11"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.0",

src/views/admin/log/msg → py.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div class="edit_container">
+      <quill-editor
+      style="height:500px;"
+        v-model="content"
+        ref="myQuillEditor"
+        :options="editorOption"
+        @blur="onEditorBlur($event)"
+        @focus="onEditorFocus($event)"
+        @change="onEditorChange($event)"
+      >
+      </quill-editor>
+    </div>
+   <div style="margin-top:100px;">
+      <el-button @click="upload">确定</el-button>
+   </div>
+  </div>
+</template>
+
+<script>
+import { quillEditor } from "vue-quill-editor"; //调用编辑器
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+// 原型
+// https://blog.csdn.net/senmage/article/details/82388728
+export default {
+  data() {
+    return {
+      content: ``,
+      editorOption: {
+        placeholder: "请在这里输入",
+        modules: {
+          toolbar: [
+            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
+            ["blockquote", "code-block"], //引用，代码块
+            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
+            [{ list: "ordered" }, { list: "bullet" }], //列表
+            [{ script: "sub" }, { script: "super" }], // 上下标
+            [{ indent: "-1" }, { indent: "+1" }], // 缩进
+            [{ direction: "rtl" }], // 文本方向
+            [{ size: ["small", false, "large", "huge"] }], // 字体大小
+            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
+            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
+            [{ font: [] }], //字体
+            [{ align: [] }], //对齐方式
+            ["clean"], //清除字体样式
+            ["image", "video"], //上传图片、上传视频
+          ],
+        },
+      },
+    };
+  },
+  components: {
+    quillEditor,
+  },
+  mounted() {},
+  computed: {
+    editor() {
+      return this.$refs.myQuillEditor.quill;
+    },
+  },
+  methods: {
+    onEditorReady(editor) {
+      // 准备编辑器
+    },
+    onEditorBlur() {}, // 失去焦点事件
+    onEditorFocus() {}, // 获得焦点事件
+    onEditorChange() {}, // 内容改变事件
+    upload() {
+      console.log(this.content);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped >
+.edit_container{
+  height: 600px;
+
+}
+</style>

src/views/admin/log/msg.vue

@@ -1,83 +1,43 @@
 <template>
   <div>
     <div class="edit_container">
-      <quill-editor
-      style="height:500px;"
-        v-model="content"
-        ref="myQuillEditor"
-        :options="editorOption"
-        @blur="onEditorBlur($event)"
-        @focus="onEditorFocus($event)"
-        @change="onEditorChange($event)"
-      >
-      </quill-editor>
+      <div id="editor"></div>
     </div>
-   <div style="margin-top:100px;">
+    <div style="margin-top: 10px">
       <el-button @click="upload">确定</el-button>
-   </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { quillEditor } from "vue-quill-editor"; //调用编辑器
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
-// 原型
-// https://blog.csdn.net/senmage/article/details/82388728
+import E from "wangeditor";
 export default {
   data() {
     return {
       content: ``,
-      editorOption: {
-        placeholder: "请在这里输入",
-        modules: {
-          toolbar: [
-            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
-            ["blockquote", "code-block"], //引用，代码块
-            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
-            [{ list: "ordered" }, { list: "bullet" }], //列表
-            [{ script: "sub" }, { script: "super" }], // 上下标
-            [{ indent: "-1" }, { indent: "+1" }], // 缩进
-            [{ direction: "rtl" }], // 文本方向
-            [{ size: ["small", false, "large", "huge"] }], // 字体大小
-            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
-            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
-            [{ font: [] }], //字体
-            [{ align: [] }], //对齐方式
-            ["clean"], //清除字体样式
-            ["image", "video"], //上传图片、上传视频
-          ],
-        },
-      },
+      editor:null,
     };
   },
-  components: {
-    quillEditor,
-  },
-  mounted() {},
-  computed: {
-    editor() {
-      return this.$refs.myQuillEditor.quill;
-    },
+
+  mounted() {
+    const editor = new E("#editor");
+    // 设置编辑区域高度为 500px
+    editor.config.height = 500;
+    editor.config.placeholder = "placeholder";
+    // 配置 server 接口地址
+    // editor.config.uploadImgServer = "/upload-img";
+    editor.config.uploadImgShowBase64 = true
+    editor.create();
+    this.editor=editor
   },
   methods: {
-    onEditorReady(editor) {
-      // 准备编辑器
-    },
-    onEditorBlur() {}, // 失去焦点事件
-    onEditorFocus() {}, // 获得焦点事件
-    onEditorChange() {}, // 内容改变事件
-    upload() {
-      console.log(this.content);
-    },
+    upload(){
+      let str=this.editor.txt.html()
+      console.log(str);
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped >
-.edit_container{
-  height: 600px;
-
-}
 </style>

vue.config.js

@@ -3,8 +3,8 @@
  * https://cli.vuejs.org/zh/config/
  */
 // const url = 'http://pigx-gateway'
-// const url = 'http://39.97.167.65:9999' //测试
-const url = 'http://192.168.31.167:9999' //长龙
+const url = 'http://39.97.167.65:9999' //测试
+// const url = 'http://192.168.31.167:9999' //长龙
 // const url = 'http://192.168.31.134:9999' //嘉豪
 // const url = 'http://192.168.31.100:9999' //王笑
 // const url = 'http://62.234.122.43:9999' //正式