:zap:富文本编辑器优化

src/components/Editor/index.vue

@@ -21,17 +21,21 @@ export default {
   props: {
     placeholder: {
       type: String,
-      default: () => '请输入内容',
+      default: () => '请输入内容'
     },
     modelValue: String,
+    // 工具栏
+    toolbarConfig: {
+      type: [Object],
+      default: () => {}
+    }
   },
   setup(props, { emit }) {
     const editorRef = shallowRef()
     const valueHtml = ref(props.modelValue)
-    const toolbarConfig = {}
     const editorConfig = {
       MENU_CONF: {},
-      placeholder: props.placeholder,
+      placeholder: props.placeholder
     }
     //上传图片
     editorConfig.MENU_CONF['uploadImage'] = {
@@ -49,7 +53,7 @@ export default {
       // 自定义增加 http  header
       headers: {
         Authorization: 'Bearer ' + getToken(),
-        userid: useUserStore().userId,
+        userid: useUserStore().userId
       },
       // 跨域是否传递 cookie ，默认为 false
       withCredentials: true,
@@ -61,7 +65,7 @@ export default {
           // 从 res 中找到 url alt href ，然后插图图片
           insertFn(res.data.url)
         )
-      },
+      }
     }
     //上传视频
     editorConfig.MENU_CONF['uploadVideo'] = {
@@ -84,7 +88,7 @@ export default {
       // 自定义增加 http  header
       headers: {
         Authorization: 'Bearer ' + getToken(),
-        userid: useUserStore().userId,
+        userid: useUserStore().userId
       },
 
       // 跨域是否传递 cookie ，默认为 false
@@ -97,7 +101,7 @@ export default {
           // 从 res 中找到 url alt href ，然后插图图片
           insertFn(res.data.url)
         )
-      },
+      }
     }
     onBeforeUnmount(() => {
       const editor = editorRef.value
@@ -118,18 +122,18 @@ export default {
           editor.clear()
           return
         }
-        valueHtml.value = value;
+        valueHtml.value = value
-      },
+      }
     )
     return {
       editorRef,
       valueHtml,
       mode: 'default',
-      toolbarConfig,
       editorConfig,
       handleCreated,
       handleChange,
+      toolbarConfig: props.toolbarConfig
+    }
   }
-  },
 }
 </script>

src/views/system/notice/index.vue

@@ -95,7 +95,7 @@
           </el-col>
           <el-col :lg="24">
             <el-form-item label="内容" prop="noticeContent">
-              <editor v-model="form.noticeContent" :min-height="196" />
+              <editor v-model="form.noticeContent" :toolbarConfig="toolbarConfig" :min-height="196" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -140,6 +140,33 @@ const data = reactive({
     noticeType: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
   }
 })
+
+const toolbarConfig = ref({
+  toolbarKeys: [
+    // 菜单 key
+    'headerSelect',
+    'bold', // 加粗
+    'italic', // 斜体
+    'through', // 删除线
+    'underline', // 下划线
+    'bulletedList', // 无序列表
+    'numberedList', // 有序列表
+    'color', // 文字颜色
+    'uploadImage', // 上传图片
+    'delIndent', // 缩进
+    'indent', // 增进
+    'insertLink', // 插入链接
+    'fontSize', // 字体大小
+    'clearStyle', // 清除格式
+    'divider', // 分割线
+    'insertTable', // 插入表格
+    'justifyCenter', // 居中对齐
+    'justifyJustify', // 两端对齐
+    'justifyLeft', // 左对齐
+    'justifyRight', // 右对齐
+    'fullScreen' // 全屏
+  ]
+})
 const statusOptions = ref([])
 const typeOptions = ref([])
 proxy.getDicts('sys_notice_status').then((response) => {