富文本下划线与着重点

src/components/RichText.vue

@@ -91,7 +91,7 @@ export default {
       type: [String, Boolean],
       /* eslint-disable max-len */
       default:
-        'fontselect fontsizeselect forecolor backcolor lineheight paragraphSpacing  indent outdent underline bold italic strikethrough alignleft aligncenter alignright bullist numlist dotEmphasis image media link blockquote hr mathjax',
+        'fontselect fontsizeselect forecolor backcolor lineheight paragraphSpacing  indent outdent customUnderline bold italic strikethrough alignleft aligncenter alignright bullist numlist dotEmphasis image media link blockquote hr mathjax',
     },
     wordlimitNum: {
       type: [Number, Boolean],
@@ -160,11 +160,6 @@ export default {
             padding-bottom: 0.3em; /* 间距也相对于字体 */
             display: inline;
           }
-           p { margin: 0 0 1em 0; }
-          .paragraph-spacing-small { margin-bottom: 0.5em; }
-          .paragraph-spacing-medium { margin-bottom: 1em; }
-          .paragraph-spacing-large { margin-bottom: 2em; }
-          .paragraph-spacing-custom { margin-bottom: var(--custom-spacing); }
           `, // 解决公式每点击一次字体就变大
         valid_elements: '*[*]', // 允许所有标签和属性
         valid_children: '+body[style]', // 允许 MathJax 的样式
@@ -183,7 +178,7 @@ export default {
         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', // 行高选项（倍数）
-        paragraphheight_formats: [0.5, 1.0, 1.2, 1.5, 2.0, 2.5, 3.0], // 段落间距
+        paragraphheight_formats: [1.0, 1.2, 1.5, 2.0, 2.5, 3.0], // 段落间距
         contextmenu: false, // 右键菜单
         menubar: false, // 菜单栏
         branding: false, // 品牌
@@ -227,6 +222,19 @@ export default {
                 remove_similar: true,
               });
             }
+            if (!editor.formatter.has('coloredunderline')) {
+              editor.formatter.register('coloredunderline', {
+                inline: 'span',
+                styles: {
+                  'border-bottom': `0.1em solid #000000`, // 要固定线粗细的话，就使用2px
+                  'padding-bottom': '1px',
+                },
+                merge_siblings: false,
+                exact: true, // 添加 exact 属性
+                wrapper: true,
+                remove_similar: true,
+              });
+            }
           });
 
           // 自定义行高下拉（因为没有内置 lineheight 插件）
@@ -258,6 +266,76 @@ export default {
             },
           });
 
+          // 重写下划线
+          editor.ui.registry.addButton('customUnderline', {
+            icon: 'underline',
+            tooltip: '下划线',
+            onAction: () => {
+              editor.windowManager.open({
+                title: '选择下划线颜色',
+                body: {
+                  type: 'panel',
+                  items: [
+                    {
+                      type: 'colorpicker',
+                      name: 'color',
+                      label: '颜色',
+                      value: '#000000',
+                    },
+                  ],
+                },
+                buttons: [
+                  {
+                    type: 'custom',
+                    name: 'cancelUndeline',
+                    text: '取消下划线',
+                  },
+                  {
+                    type: 'cancel',
+                    text: '取消',
+                  },
+                  {
+                    type: 'submit',
+                    text: '确定',
+                    buttonType: 'primary',
+                    enabled: true,
+                  },
+                ],
+                initialData: {
+                  color: '#000000',
+                },
+                onSubmit: (api) => {
+                  const color = api.getData().color;
+                  // 加下划线
+                  //editor.execCommand('Underline');
+                  //注册自定义格式
+                  editor.formatter.register('coloredunderline', {
+                    inline: 'span',
+                    styles: {
+                      'border-bottom': `0.1em solid ${color}`, //要固定线粗细的话，就使用2px
+                      'padding-bottom': '1px',
+                    },
+                    merge_siblings: false,
+                    exact: true, // 添加 exact 属性
+                    wrapper: true,
+                    remove_similar: true,
+                  });
+
+                  // 应用格式
+                  editor.formatter.apply('coloredunderline');
+
+                  api.close();
+                },
+                onAction: (api, details) => {
+                  if (details.name === 'cancelUndeline') {
+                    editor.formatter.remove('coloredunderline');
+                    api.close();
+                  }
+                },
+              });
+            },
+          });
+
           // 添加段落间距下拉菜单
           editor.ui.registry.addMenuButton('paragraphSpacing', {
             icon: 'paragraph',