Forráskód Böngészése

富文本排除掉某些菜单

lifanagju_citu 10 hónapja
szülő
commit
2ef478b7d6

+ 10 - 2
src/components/FormUI/wangEditor/index.vue

@@ -7,6 +7,7 @@
       <Toolbar
         :editor="editorRef"
         :editorId="editorId"
+        :defaultConfig="toolbarConfig"
         class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
       />
       <!-- 编辑器 -->
@@ -26,11 +27,12 @@
 <script setup>
 defineOptions({ name: 'wangEditor-index' })
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { onBeforeUnmount, ref, shallowRef, unref, computed, nextTick, watch } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, unref, computed, nextTick, watch, reactive } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { i18nChangeLanguage } from '@wangeditor/editor'
 import { isNumber } from '@/utils/is'
 import Snackbar from '@/plugins/snackbar'
+import { getExcludeKeys } from './util/toolbarConfig'
 // import { getAccessToken, getTenantId } from '@/utils/auth'
 
 i18nChangeLanguage('zh-CN')
@@ -89,8 +91,11 @@ watch(
   }
 )
 
+// import { DomEditor } from '@wangeditor/editor'
 const handleCreated = (editor) => {
-  editorRef.value = editor
+  editorRef.value = editor // 记录 editor 实例,重要!
+  // console.log('editor->', editor)
+  console.log('所有菜单 key->', editor.getAllMenuKeys()) // 所有菜单 key (可能有的不在工具栏上)
 }
 
 const onMaxLengthFun = (editor) => {
@@ -103,6 +108,9 @@ const onBlurFun = (editor) => {
   if (!text) valueHtml.value = ''
 }
 
+// 编辑器配置
+const toolbarConfig = reactive({ excludeKeys: getExcludeKeys() })
+
 // 编辑器配置
 const editorConfig = computed(() => {
   return Object.assign(

+ 43 - 0
src/components/FormUI/wangEditor/util/toolbarConfig.js

@@ -0,0 +1,43 @@
+// 排除掉某些菜单 // getAllMenuKeys查看所有菜单
+export const getExcludeKeys = () => {
+  // 排除
+  const excludeKeys = [
+    'fontFamily',
+    'emotion',
+    'insertLink',
+    'editLink',
+    'unLink',
+    'viewLink',
+    'fullScreen',
+    'todo',
+    // 表格
+    'insertTable',
+    'deleteTable',
+    'insertTableRow',
+    'deleteTableRow',
+    'insertTableCol',
+    'deleteTableCol',
+    'tableHeader',
+    'tableFullWidth',
+    // 图片
+    'group-image',
+    'insertImage',
+    'deleteImage',
+    'editImage',
+    'viewImageLink',
+    'imageWidth30',
+    'imageWidth50',
+    'imageWidth100',
+    'uploadImage',
+    // 视频
+    'group-video',
+    'insertVideo',
+    'uploadVideo',
+    'editVideoSize',
+    // 代码
+    'code',
+    'codeBlock',
+    'codeSelectLang',
+  ]
+  return excludeKeys
+}