Browse Source

着重点功能调整

富文本屏蔽超链接打开位置
zq 1 week ago
parent
commit
06613a2d98
3 changed files with 26 additions and 13 deletions
  1. 14 12
      src/components/RichText.vue
  2. 11 0
      src/styles/index.scss
  3. 1 1
      src/utils/common.js

+ 14 - 12
src/components/RichText.vue

@@ -147,7 +147,7 @@ export default {
             font-size: 16px !important; /* 强制固定字体 */
             line-height: 1.2 !important; /* 避免行高影响 */
           }
-          .emphasis-dot {
+          .rich-text-emphasis-dot {
             border-bottom: none;
             background-image: radial-gradient(
               circle at center,
@@ -184,6 +184,8 @@ export default {
         branding: false, // 品牌
         statusbar: false, // 状态栏
         entity_encoding: 'raw', // raw不编码任何字符;named: 使用命名实体(如  );numeric: 使用数字实体(如  )
+        target_list: false,
+        default_link_target: '_blank', // 或 '_self'
         setup: (editor) => {
           editor.on('GetContent', (e) => {
             if (e.format === 'html') {
@@ -207,17 +209,17 @@ export default {
             if (!editor.formatter.has('emphasisDot')) {
               editor.formatter.register('emphasisDot', {
                 inline: 'span',
-                // classes: 'emphasis-dot',
-                styles: {
-                  'border-bottom': 'none',
-                  'background-image':
-                    'radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em)' /* 圆点大小相对于字体 */,
-                  'background-size': '1em 0.3em' /* 间距相对于字体大小,高度相对字体 */,
-                  'background-repeat': 'repeat-x',
-                  'background-position': '0 100%',
-                  'padding-bottom': '0.3em' /* 间距也相对于字体 */,
-                  display: 'inline',
-                },
+                classes: 'rich-text-emphasis-dot',
+                // styles: {
+                //   'border-bottom': 'none',
+                //   'background-image':
+                //     'radial-gradient(circle at center, currentColor 0.15em, transparent 0.16em)' /* 圆点大小相对于字体 */,
+                //   'background-size': '1em 0.3em' /* 间距相对于字体大小,高度相对字体 */,
+                //   'background-repeat': 'repeat-x',
+                //   'background-position': '0 100%',
+                //   'padding-bottom': '0.3em' /* 间距也相对于字体 */,
+                //   display: 'inline',
+                // },
                 wrapper: true,
                 remove_similar: true,
               });

+ 11 - 0
src/styles/index.scss

@@ -92,6 +92,17 @@ ul {
   }
 }
 
+/* 富文本着重点 */
+.rich-text-emphasis-dot {
+  display: inline;
+  padding-bottom: 0.2em; /* 间距也相对于字体 */
+  background-image: radial-gradient(circle at center, currentColor 0.15em, /* 圆点大小相对于字体 */ transparent 0.16em);
+  background-repeat: repeat-x;
+  background-position: 0 100%;
+  background-size: 1em 0.3em; /* 间距相对于字体大小,高度相对字体 */
+  border-bottom: none;
+}
+
 .card {
   padding: 2em;
 }

+ 1 - 1
src/utils/common.js

@@ -147,5 +147,5 @@ export function getArrayDepth(arr) {
  * @returns {string} 过滤后的html
  */
 export function sanitizeHTML(html) {
-  return DOMPurify.sanitize(html);
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
 }