Browse Source

富文本添加全角快捷插入按钮

zq 1 month ago
parent
commit
6008480911
1 changed files with 16 additions and 1 deletions
  1. 16 1
      src/components/RichText.vue

+ 16 - 1
src/components/RichText.vue

@@ -93,7 +93,7 @@ export default {
       type: [String, Boolean],
       /* eslint-disable max-len */
       default:
-        'fontselect fontsizeselect forecolor backcolor lineheight paragraphSpacing letterSpacing indent outdent customUnderline bold italic strikethrough alignleft aligncenter alignright bullist numlist dotEmphasis image media link blockquote hr mathjax',
+        'fontselect fontsizeselect forecolor backcolor lineheight paragraphSpacing letterSpacing indent outdent customUnderline bold italic strikethrough alignleft aligncenter alignright bullist numlist dotEmphasis image media link blockquote hr mathjax fullwidthspace',
     },
     wordlimitNum: {
       type: [Number, Boolean],
@@ -509,6 +509,21 @@ export default {
             },
           });
 
+          // 注册自定义全角空格图标
+          editor.ui.registry.addIcon(
+            'fullwidthspace',
+            `<svg t="1783668748484" class="icon" viewBox="0 0 1120 724" version="1.1" p-id="2060" width="18" height="18"><path d="M511.7 283.9c-123 0-223.6 101.1-223.6 224.8s100.5 224.8 223.6 224.8 223.6-101.1 223.6-224.8-100.6-224.8-223.6-224.8z m0 74.9c82.8 0 149.1 66.6 149.1 149.9s-66.3 149.9-149.1 149.9S362.6 592 362.6 508.7s66.3-149.9 149.1-149.9z" p-id="2061"></path><path d="M886.5 137.4v748.1H138.4V137.4h748.1m73.9-73.8H64.7v895.7h895.7V63.6z m0 0" p-id="2062"></path></svg>`,
+          );
+          // 添加全角空格快捷方式
+          editor.ui.registry.addButton('fullwidthspace', {
+            icon: 'fullwidthspace',
+            tooltip: '插入全角空格',
+            onAction: () => {
+              // \u3000 = 全角空格
+              editor.insertContent('\u3000');
+            },
+          });
+
           editor.on('click', () => {
             if (editor?.queryCommandState('ToggleToolbarDrawer')) {
               editor.execCommand('ToggleToolbarDrawer');