init

package.json

@@ -28,6 +28,7 @@
     "js-cookie": "^2.2.0",
     "less-loader": "^6.0.0",
     "nprogress": "^0.2.0",
+    "quill": "^1.3.7",
     "script-loader": "^0.7.2",
     "sockjs-client": "1.0.0",
     "sortablejs": "^1.14.0",
@@ -42,7 +43,7 @@
     "vue-echarts": "^4.0.1",
     "vue-json-editor": "^1.2.3",
     "vue-json-tree-view": "^2.1.4",
-    "vue-quill-editor": "3.0.6",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1"

src/views/admin/log/msg.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>

vue.config.js

@@ -4,10 +4,10 @@
  */
 // const url = 'http://pigx-gateway'
 // const url = 'http://39.97.167.65:9999' //测试
-// const url = 'http://192.168.31.169: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' //正式
+// const url = 'http://62.234.122.43:9999' //正式
 
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']