瀏覽代碼

自定义行高下拉

dsy 2 周之前
父節點
當前提交
40776807f3
共有 1 個文件被更改,包括 64 次插入12 次删除
  1. 64 12
      src/components/RichText.vue

+ 64 - 12
src/components/RichText.vue

@@ -163,7 +163,7 @@ export default {
         min_height: this.height,
         width: '100%',
         autoresize_bottom_margin: 0,
-        plugins: 'link lists image hr media autoresize ax_wordlimit paste lineheight',
+        plugins: 'link lists image hr media autoresize ax_wordlimit paste', // 移除 lineheight
         toolbar: this.toolbar, // 工具栏
         lineheight_formats: '0.5 1.0 1.2 1.5 2.0 2.5 3.0', // 行高选项(倍数)
         contextmenu: false, // 右键菜单
@@ -179,6 +179,35 @@ export default {
             editor.getBody().style.fontFamily = this.init.font_family; // 设置默认字体
           });
 
+          // 自定义行高下拉(因为没有内置 lineheight 插件)
+          editor.ui.registry.addMenuButton('lineheight', {
+            text: '行高',
+            tooltip: '行高',
+            fetch: (callback) => {
+              const formats = (this.init.lineheight_formats || '').split(/\s+/).filter(Boolean);
+              const items = formats.map((v) => {
+                return {
+                  type: 'menuitem',
+                  text: v,
+                  onAction: () => {
+                    try {
+                      const name = `lineheight_${v.replace(/\./g, '_')}`;
+                      // 动态注册格式(会覆盖同名注册,安全)
+                      editor.formatter.register(name, {
+                        inline: 'span',
+                        styles: { lineHeight: v },
+                      });
+                      editor.formatter.apply(name);
+                    } catch (err) {
+                      // 容错处理
+                    }
+                  },
+                };
+              });
+              callback(items);
+            },
+          });
+
           editor.on('click', () => {
             if (editor?.queryCommandState('ToggleToolbarDrawer')) {
               editor.execCommand('ToggleToolbarDrawer');
@@ -276,19 +305,44 @@ export default {
     },
     fontSize: {
       handler(newVal) {
-        let editor = tinymce.get(this.id);
-        if (editor) {
-          editor.getBody().style.fontSize = newVal;
-          editor.execCommand('FontSize', false, newVal);
+        const editor = tinymce.get(this.id);
+        if (!editor || typeof editor.execCommand !== 'function') return;
+
+        const applyFontSize = () => {
+          try {
+            editor.execCommand('FontSize', false, newVal);
+          } catch (e) {
+            // 容错:某些情况下 execCommand 会抛错,忽略即可
+            // console.warn('apply fontSize failed', e);
+          }
+        };
+
+        // 如果 selection 暂不可用,延迟一次执行以避免其他监听器中访问 selection 报错
+        if (!editor.selection || typeof editor.selection.getRng !== 'function') {
+          setTimeout(applyFontSize, 100);
+        } else {
+          applyFontSize();
         }
       },
     },
     fontFamily: {
       handler(newVal) {
-        let editor = tinymce.get(this.id);
-        if (editor) {
-          editor.getBody().style.fontFamily = newVal;
-          editor.execCommand('FontName', false, newVal);
+        const editor = tinymce.get(this.id);
+        if (!editor || typeof editor.execCommand !== 'function') return;
+
+        const applyFontFamily = () => {
+          try {
+            editor.execCommand('FontName', false, newVal);
+          } catch (e) {
+            // 容错:忽略因 selection 不可用或其它原因导致的错误
+          }
+        };
+
+        // 如果 selection 暂不可用,延迟执行
+        if (!editor.selection || typeof editor.selection.getRng !== 'function') {
+          setTimeout(applyFontFamily, 100);
+        } else {
+          applyFontFamily();
         }
       },
     },
@@ -632,9 +686,7 @@ export default {
           if (/<[^>]+>/g.test(item)) return item;
 
           return item
-            .map((li) =>
-              li.map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || '')),
-            )
+            .map(({ number, con }) => (number && con ? addTone(Number(number), con) : number || con || ''))
             .flat();
         })
         // 如果是数组,将数组字符串每两个之间加一个空格