feat

- 添加文章
    - 富文本编辑器更换为 wangeditor/editor-for-vue

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:14:13
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-09 15:05:35
+ * @LastEditTime: 2022-09-14 09:05:48
  * @FilePath: \TelpoUserManageAdmin\README.md
  * @description:
 -->
@@ -77,4 +77,10 @@ feat
 ## v1.0.2
 `2022.9.9`
 feat
-- 增加 群发列表功能
+- 增加 群发列表功能
+
+## v1.0.3
+`2022.9.14`
+feat
+- 添加文章
+    - 富文本编辑器更换为 wangeditor/editor-for-vue

package.json

@@ -16,6 +16,8 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.15",
+    "@wangeditor/editor-for-vue": "^1.0.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",
@@ -23,7 +25,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
-    "vue": "2.6.10",
+    "vue": "2.6.14",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
@@ -52,7 +54,7 @@
     "serve-static": "1.13.2",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.14"
   },
   "browserslist": [
     "> 1%",

src/utils/model.js

@@ -1,8 +1,8 @@
 /*
  * @Date: 2021-11-30 15:09:25
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-09-09 15:05:38
+ * @LastEditTime: 2022-09-14 09:05:54
  * @FilePath: \TelpoUserManageAdmin\src\utils\model.js
  * @description: 版本号
  */
-export const VersionModel = '1.0.2';
+export const VersionModel = '1.0.3';

src/views/message-manage/main/add-articles/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2022-08-08 10:09:45
  * @LastEditors: JinxChen
- * @LastEditTime: 2022-08-09 16:44:50
+ * @LastEditTime: 2022-09-13 17:00:45
  * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\add-articles\index.vue
  * @description: 添加文章
 -->
@@ -55,8 +55,23 @@
 
         <!-- 富文本编辑器 -->
         <el-form-item label="文章内容:">
-          <tinymce v-model="form.articleContent" :height="5" menubar="false" />
+         <!--  <tinymce v-model="form.articleContent" :height="5" menubar="false" /> -->
          <!--  <p>文章内容：{{form.articleContent}}</p> -->
+         <div style="border: 1px solid #ccc;">
+            <Toolbar
+                style="border-bottom: 1px solid #ccc"
+                :editor="editor"
+                :defaultConfig="toolbarConfig"
+                :mode="mode"
+            />
+            <Editor
+                style="height: 350px; overflow-y: hidden;"
+                v-model="form.articleContent"
+                :defaultConfig="editorConfig"
+                :mode="mode"
+                @onCreated="onCreated"
+            />
+         </div>
         </el-form-item>
 
         <!-- 保存 -->
@@ -70,10 +85,11 @@
 
 <script>
 import TopMenu from "@/components/TopMenu/index";
-import Tinymce from '@/components/Tinymce'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+/* import Tinymce from '@/components/Tinymce' */
 export default {
   name: 'wechat-fans',
-  components: { TopMenu, Tinymce },
+  components: { TopMenu, /* Tinymce */ Editor, Toolbar },
   data(){
    return {
      buttonList: [], // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
@@ -95,6 +111,10 @@ export default {
      ],
     //  图片列表
     fileList: [],
+    editor: null,
+    toolbarConfig: { },
+    editorConfig: { placeholder: '请输入内容...' },
+    mode: 'default', // or 'simple'
 
    }
   },
@@ -103,7 +123,15 @@ export default {
     this.clearFiles();
     console.log("本地的上传图片列表", this.fileList);
   },
+  beforeDestroy() {
+      const editor = this.editor
+      if (editor == null) return
+      editor.destroy() // 组件销毁时，及时销毁编辑器
+  },
   methods: {
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
     // 清空本地上传的图片列表
     clearFiles() {},
     // 删除上传的图片
@@ -151,6 +179,7 @@ export default {
 }
 </script>
 
+<style src="@wangeditor/editor/dist/css/style.css"></style>
 <style scoped lang="scss">
   .home-container {
     position: relative;