wangEditon富文本编辑器

package.json

@@ -43,6 +43,7 @@
     "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.20.0",
     "vuex": "^3.1.0",
+    "wangeditor": "^4.7.12",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {

src/components/Detail/editor.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="editorSection"></div>
+  <!-- <div id="editorSection"></div> -->
+  <div>
+    <editor-bar v-model="detail" :isClear="isClear" @change="change"></editor-bar>
+  </div>
 </template>
 
 <script>
@@ -9,14 +12,21 @@ import "tui-editor/dist/tui-editor-contents.css"; // editor's content
 import "codemirror/lib/codemirror.css"; // codemirror
 import "highlight.js/styles/github.css"; // code block highlight
 import { init } from "echarts/lib/echarts";
-
+import EditorBar from './editoritem'
 export default {
+  components: { EditorBar },
   props:{
     content:{
       type: String,
       default: ''
     }
   },
+  data() {
+    return {
+      isClear: false,
+      detail:""
+    }
+  },
   watch: {
     content(val){
       if(val){
@@ -25,16 +35,20 @@ export default {
     }
   },
   mounted() {
-    this.initialize();
-    this.$nextTick(() => {
-      this.setValue(this.content)
-    })
+    // this.initialize();
+    // this.$nextTick(() => {
+    //   this.setValue(this.content)
+    // })
   },
   beforeDestroy() {
     this.tuieditor = null;
     delete this.tuieditor;
   },
   methods: {
+    change(val) {
+      console.log(val)
+
+    },
     initialize() {
       if (this.$el) {
         this.tuieditor = new Editor({

src/components/Detail/editoritem.vue

@@ -0,0 +1,53 @@
+<template lang="html">
+  <div id="editor" name="productcontent">
+</div>
+</template>
+
+<script>
+  import {BASE_API} from '../../config';
+  import E from 'wangeditor'
+  export default {
+    name: 'editoritem',
+    data() {
+      return {
+        // uploadPath,
+        editor: null,
+      }
+    },
+    mounted() {
+      this.seteditor()
+      this.editor.txt.html(this.value)
+    },
+    methods: {
+      seteditor() {
+        this.editor = new E( document.getElementById('editor') )
+        this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
+        this.editor.config.uploadImgServer = `${BASE_API}/file/upload`// 配置服务器端地址
+        this.editor.config.uploadImgHeaders = {
+          'Content-Type': 'multipart/form-data'
+         }// 自定义 header
+        this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
+        this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
+        this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
+        this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
+        this.editor.create()
+      }
+    }
+  }
+</script>
+
+<style lang="css">
+  .editor {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 0;
+  }
+  .toolbar {
+    border: 1px solid #ccc;
+  }
+  .text {
+    border: 1px solid #ccc;
+    min-height: 500px;
+  }
+</style>

src/views/privilegeManagement/account/index.vue

@@ -188,9 +188,9 @@
             open(userId,type) {
                 let title = ''
                 if(type === 0) {
-                    title = '是否删除当前账户'
+                    title = '是否重置账户密码'
                 } else {
-                    title = '是否删除重置账户密码'
+                    title = '是否删除当前账户'
                 }
                 this.$alert(title, '请确认', {
                 confirmButtonText: '确定',