Prechádzať zdrojové kódy

解决富文本插件空行被清理掉的问题

zq 3 týždňov pred
rodič
commit
4c26b68eb9
1 zmenil súbory, kde vykonal 66 pridanie a 1 odobranie
  1. 66 1
      src/components/RichText.vue

+ 66 - 1
src/components/RichText.vue

@@ -171,9 +171,19 @@ export default {
         branding: false, // 品牌
         statusbar: false, // 状态栏
         entity_encoding: 'raw', // raw不编码任何字符;named: 使用命名实体(如  );numeric: 使用数字实体(如  )
+       
+
+
         setup: (editor) => {
+
+          var that=this
+            editor.on('GetContent', function(e) {
+              if (e.format === 'html') {
+                e.content = that.smartPreserveLineBreaks(editor, e.content);
+              }
+          });
+          
           let isRendered = false; // 标记是否已渲染
-          let that = this;
           editor.on('init', () => {
             editor.getBody().style.fontSize = this.init.font_size; // 设置默认字体大小
             editor.getBody().style.fontFamily = this.init.font_family; // 设置默认字体
@@ -369,6 +379,60 @@ export default {
     }
   },
   methods: {
+
+  smartPreserveLineBreaks(editor, content) {
+    var that=this
+    var body = editor.getBody();
+    var originalParagraphs = Array.from(body.getElementsByTagName('p'));
+    
+    var tempDiv = document.createElement('div');
+    tempDiv.innerHTML = content;
+    var outputParagraphs = Array.from(tempDiv.getElementsByTagName('p'));
+    
+    outputParagraphs.forEach(function(outputP, index) {
+      var originalP = originalParagraphs[index];
+      
+      if (originalP && outputP.innerHTML === '') {
+        // 判断这个空段落是否应该包含 <br>
+        var shouldHaveBr =that.shouldPreserveLineBreak(originalP, index, originalParagraphs);
+        if (shouldHaveBr) {
+          outputP.innerHTML = '<br>';
+        }
+      }
+    });
+    
+    return tempDiv.innerHTML;
+  },
+  
+   shouldPreserveLineBreak(paragraph, index, allParagraphs) {
+    // 规则1:如果段落原本包含 <br>
+    if (paragraph.innerHTML.includes('<br>')) {
+      return true;
+    }
+    
+    // 规则2:如果段落位于内容中间(不是第一个或最后一个)
+    if (index > 0 && index < allParagraphs.length - 1) {
+      var prevHasContent = allParagraphs[index - 1].textContent.trim() !== '';
+      var nextHasContent = allParagraphs[index + 1].textContent.trim() !== '';
+      
+      if (prevHasContent && nextHasContent) {
+        return true;
+      }
+    }
+    
+    // 规则3:如果段落是通过回车创建的(前后有内容)
+    var isBetweenContent = false;
+    if (index > 0 && allParagraphs[index - 1].textContent.trim() !== '') {
+      isBetweenContent = true;
+    }
+    if (index < allParagraphs.length - 1 && allParagraphs[index + 1].textContent.trim() !== '') {
+      isBetweenContent = true;
+    }
+    
+    return isBetweenContent;
+  },
+
+
     // 设置背景色
     setBackgroundColor() {
       let iframes = document.getElementsByTagName('iframe');
@@ -652,6 +716,7 @@ export default {
     handleRichTextBlur() {
       this.$emit('handleRichTextBlur', this.itemIndex);
       let content = tinymce.get(this.id).getContent();
+
       if (this.isViewPinyin) {
         this.createParsedTextInfoPinyin(content);
         return;