富文本编辑；样式修改；其他；

src/App.vue

@@ -43,7 +43,7 @@ export default {
       userAccount: "",
       userToken: "",
       loadingFlag: true,
-      login_out_url: login_out_url
+      login_out_url: login_out_url,
     };
   },
   methods: {
@@ -119,7 +119,7 @@ export default {
         let query = this.$route.query || {};
         if (query.token) {
           sessionStorage.setItem("setToken", query.token);
-          this.userToken = query.token || '';
+          this.userToken = query.token || "";
           console.log("token:", this.userToken);
           this.getTokenRequest();
         } else {
@@ -129,7 +129,7 @@ export default {
     },
   },
   mounted() {},
- /*  created() {
+  /*  created() {
     this.loadingFlag = true;
     this.getData(); // 线上打开
     // 本地调试打开
@@ -148,24 +148,25 @@ export default {
     //   this.userAccount = "L0210_MM";
     // }
   }, */
-    created() {
+  created() {
     this.loadingFlag = true;
-    this.getData(); // 线上打开
-    // 本地调试打开 
-    //  this.loadingFlag = false;
-    // // this.isManufacturer = "manufacturer"; distributor
-    //    this.isManufacturer = "manufacturer"
-    //  if (this.isManufacturer === 'manufacturer') {
-    //    if(this.$route.path === '/loading') this.$router.replace({ path: "/uploadInfor" });
-    //    localStorage.setItem("userId", 3084);
-    //   sessionStorage.setItem("userNameAccount", "L0M14_MM");
-    //   this.userAccount = "L0M14_MM";
-    //  } else {
-    //    if(this.$route.path !== '/loading') this.$router.replace({ path: "/inforList" });
-    //   localStorage.setItem("userId", 2002);
-    //    sessionStorage.setItem("userNameAccount", "L0210_MM");
-    //    this.userAccount = "L0210_MM";
-    //  }
+    /* this.getData(); // 线上打开 */
+    // 本地调试打开
+    this.loadingFlag = false;
+    this.isManufacturer = "manufacturer"; //  distributor
+    if (this.isManufacturer === "manufacturer") {
+      if (this.$route.path === "/loading")
+        this.$router.replace({ path: "/uploadInfor" });
+      localStorage.setItem("userId", 3084);
+      sessionStorage.setItem("userNameAccount", "L0M14_MM");
+      this.userAccount = "L0M14_MM";
+    } else {
+      if (this.$route.path !== "/loading")
+        this.$router.replace({ path: "/inforList" });
+      localStorage.setItem("userId", 2002);
+      sessionStorage.setItem("userNameAccount", "L0210_MM");
+      this.userAccount = "L0210_MM";
+    }
   },
 };
 </script>
@@ -236,7 +237,7 @@ button {
   }
 }
 // 时间选择框样式
-.datePickStyle{
+.datePickStyle {
   height: 28px;
   width: 144px;
   border: 1px solid #ccc;
@@ -244,7 +245,7 @@ button {
   color: #555;
   font-size: 12px;
 }
-.datePickClass{
+.datePickClass {
   height: 28px;
   width: 144px;
   padding: 4px 8px;

src/views/notification/custom_extensions/CodeView/MenuButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-button size="small" @click="onClick" class="bor">
+    <img src="../../image/code.png" class="tuPian" />
+    <span class="fon">源码</span>
+  </el-button>
+</template>
+<script>
+export default {
+  name: "BoldMenuButton",
+
+  props: ["isActive"],
+
+  methods: {
+    onClick(e) {
+      console.log(e);
+      this.$emit("click");
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.tuPian {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  top: 4px;
+  margin-right: 4px;
+}
+.bor {
+  border: 0px solid;
+  line-height: 30px;
+  width: 60px;
+  height: 40px;
+}
+.fon {
+  font-weight: bolder;
+}
+</style>

src/views/notification/custom_extensions/CodeView/index.js

@@ -0,0 +1,24 @@
+import { Bold as OriginalBold } from "element-tiptap";
+import CustomBoldMenuButton from "./MenuButton";
+
+export default class Bold extends OriginalBold {
+    // here you can extend the extension like tiptap, 
+    //such as schema, plugins ...
+
+    menuBtnView({ isActive, commands, focus, editor }) {
+        console.log(focus, editor)
+        return {
+            component: CustomBoldMenuButton,
+            componentProps: {
+                isActive: isActive.bold()
+            },
+            componentEvents: {
+                click: () => {
+                    console.log("button clicked");
+                    // you can do somethings when button clicked
+                    commands.bold();
+                }
+            }
+        };
+    }
+}

src/views/notification/custom_extensions/helpButton/MenuButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-button size="small" @click="onClick" class="bor">
+    <img src="../../image/wenHao.png" class="tuPian" />
+  </el-button>
+</template>
+<script>
+export default {
+  name: "BoldMenuButton",
+
+  props: ["isActive"],
+
+  methods: {
+    onClick(e) {
+      console.log(e);
+      this.$emit("click");
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.tuPian {
+  width: 16px;
+  height: 16px;
+}
+.bor {
+  border: 0px solid;
+  line-height: 30px;
+  width: 40px;
+  height: 40px;
+}
+</style>

src/views/notification/custom_extensions/helpButton/index.js

@@ -0,0 +1,24 @@
+import { Bold as OriginalBold } from "element-tiptap";
+import CustomBoldMenuButton from "./MenuButton";
+
+export default class Bold extends OriginalBold {
+    // here you can extend the extension like tiptap, 
+    //such as schema, plugins ...
+
+    menuBtnView({ isActive, commands, focus, editor }) {
+        console.log(focus, editor)
+        return {
+            component: CustomBoldMenuButton,
+            componentProps: {
+                isActive: isActive.bold()
+            },
+            componentEvents: {
+                click: () => {
+                    console.log("button clicked");
+                    // you can do somethings when button clicked
+                    commands.bold();
+                }
+            }
+        };
+    }
+}

src/views/notification/detail/itemDetail.vue

@@ -19,7 +19,7 @@ export default {
           info: "通知",
           title: "title",
           time: "2021/05/01",
-          content: '各位经销商同仁非常感谢一直以来对经销商市场支援项目的支持与帮助。题记事宜, 2020年12月线索相关数据明细已经上传系统,烦请参看。再次感谢'
+          content: '各位经销商同仁非常感谢一直以来对经销商市场支援项目的支持与帮助。\n题记事宜, 2020年12月线索相关数据明细已经上传系统,烦请参看。再次感谢'
         },
       ],
     };

src/views/notification/editPage/editPage.vue

@@ -26,11 +26,20 @@
       </div>
       <div class="Line Line4">
         <span>信息配置:</span>
-        <!-- <input class="focusStyle" /> -->
         <div class="fuWenBen">
-          <el-tiptap v-model="content" :extensions="extensions" />
+          <el-tiptap
+            v-model="content"
+            :extensions="extensions"
+            :charCounterCount="false"
+            placeholder="Write something ..."
+          >
+            <!--charCounterCount 是否显示字数统计 -->
+          </el-tiptap>
         </div>
+        <div style="clear: both; display: block"></div>
       </div>
+
+      
       <div class="Line Line5">
         <span>附件:</span>
         <button>添加附件</button>
@@ -47,17 +56,50 @@
 import {
   // necessary extensions
   Doc,
-  Text,
   Paragraph,
+  Text,
   Heading,
+  History,
+  Code,
+  CodeBlock,
+  Blockquote,
+  BulletList,
+  OrderedList,
+  ListItem,
+  TodoList,
+  TodoItem,
+  //Iframe,
+  Table,
+  TableHeader,
+  TableRow,
+  TableCell,
+  TextAlign,
+  LineHeight,
+  Indent,
+  HorizontalRule,
+  HardBreak,
+  TrailingNode,
+  TextColor,
+  TextHighlight,
+  FormatClear,
+  FontType,
+  FontSize,
+  // Preview,
+  //Print,
+  // SelectAll,
   Bold,
-  Underline,
+  //Underline,
   Italic,
   Strike,
-  ListItem,
-  BulletList,
-  OrderedList,
+  Link,
+  Image,
+  Fullscreen,
+  // CodeView,
 } from "element-tiptap";
+
+import helpButton from "../custom_extensions/helpButton/index";
+import CodeView from "../custom_extensions/CodeView/index";
+
 export default {
   components: {},
   data() {
@@ -66,23 +108,53 @@ export default {
       areaList: ["全区", "北区", "南区", "东区"], // 按区域添加
       checkedBoxList: [], // 多选框选中的值
       extensions: [
+        // new Preview(),
+        // new Print(),
+        // new SelectAll(),
+        new Bold({ bubble: false }), // render command-button in bubble menu.
+        new Italic(),
+        new Strike(),
+        new Link(),
+        new Image(),
+        new Fullscreen(),
+        new CodeView(), //源码
+        new Doc(),
+        new Text(),
+        new Paragraph(),
         new Doc(),
         new Text(),
         new Paragraph(),
         new Heading({ level: 5 }),
-        new Bold({ bubble: true }), // render command-button in bubble menu.
-        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
-        new Italic(),
-        new Strike(),
-        new ListItem(),
+        new Code(),
+        new Blockquote(),
         new BulletList(),
         new OrderedList(),
+        new ListItem(),
+        new CodeBlock(),
+        new TodoList(),
+        new TodoItem(),
+        new Table(),
+        new TableHeader(),
+        new TableRow(),
+        new TableCell(),
+        new TextAlign(),
+        new LineHeight(),
+        new Indent(),
+        new HorizontalRule(),
+        new HardBreak(),
+        new TrailingNode(),
+        new TextColor(),
+        new TextHighlight(),
+        new FormatClear(),
+        new FontType(),
+        new FontSize(),
+        new History(),
+        new helpButton({ bubble: false }),
       ],
       // editor's content
-      content: `
-        <h1>Heading</h1>
-        <p>This Editor is awesome!</p>
-      `,
+      /* <h1>Heading</h1>
+        <p>This Editor is awesome!</p> */
+      content: ``,
     };
   },
   computed: {},
@@ -112,14 +184,11 @@ export default {
 
 
 <style scoped lang="less">
-/* .notice_changShang_edit {
-  height: 500px;
-} */
 .fuWenBen {
   position: relative;
   left: 80px;
-  top: -31px;
-  width: 100%;
+  top: -40px;
+  width: 950px;
 }
 .operationStyle {
   display: flex;
@@ -182,8 +251,9 @@ export default {
 }
 .Line4 {
   margin-top: 9px;
-  height: 230px;
+  height: auto;
 }
+
 .Line5 span {
   position: relative;
 }