IE中使用contenteditable时如何处理换行与空格？UI5应用兼容求助

Hey there, let's fix that pesky IE compatibility issue with your contenteditable div in UI5! I’ve run into this exact problem before—IE handles contenteditable text formatting way differently than Chrome or Firefox, especially when it comes to line breaks and tabs. Let’s break down why it’s happening and how to fix it.

Why IE is misbehaving #

Unlike modern browsers that preserve line breaks as \n or use <br> tags, IE wraps pasted lines in <p> elements and converts tabs to spaces or ignores them entirely. When you try to read the text directly via innerText or textContent, those HTML tags don’t translate to proper line breaks/tabs, so your parsing logic breaks.

Solution 1: Clean up HTML content after reading #

If you can’t modify the paste behavior, you can process the raw HTML from the div to convert those IE-specific tags into the line breaks and tabs you need. Here’s how to adjust your code:

First, let’s assume your XML view has a setup like this (matching your description):

<core:View xmlns:core="sap.ui.core" xmlns="sap.m" controllerName="your.app.Controller">
  <VBox>
    <div id="editableDiv" contenteditable="true" style="width:100%; height:200px; border:1px solid #ccc; padding:8px;" />
    <Button text="读取数据" press="onReadData" class="sapUiSmallMarginTop" />
  </VBox>
</core:View>

Now update your controller’s onReadData function to clean the content:

onReadData: function() {
  const oEditableDiv = this.getView().byId("editableDiv").getDomRef();
  let rawHtml = oEditableDiv.innerHTML;

  // Convert IE's HTML tags to proper line breaks and tabs
  let processedText = rawHtml
    // Replace <p> tags with line breaks
    .replace(/<p[^>]*>/gi, "\n")
    // Replace <br> tags with line breaks
    .replace(/<br\s*\/?>/gi, "\n")
    // Remove closing </p> tags
    .replace(/<\/p>/gi, "")
    // Replace non-breaking spaces with regular spaces
    .replace(/&nbsp;/gi, " ")
    // Handle any tab entities IE might generate
    .replace(/&tab;/gi, "\t")
    // Strip all remaining HTML tags
    .replace(/<[^>]+>/g, "");

  // Clean up extra line breaks and trim whitespace
  processedText = processedText.replace(/\n+/g, "\n").trim();

  // Now you can parse processedText normally!
  console.log("处理后的数据:", processedText);
  // Add your parsing logic here
}

Solution 2: Normalize paste behavior upfront #

A better long-term fix is to force IE to paste plain text instead of generating HTML tags. This way, you don’t have to clean up messy HTML later. Add this to your controller’s onInit method:

onInit: function() {
  const oEditableDiv = this.getView().byId("editableDiv").getDomRef();
  
  oEditableDiv.addEventListener("paste", (e) => {
    e.preventDefault(); // Stop default paste behavior
    
    // Get plain text from clipboard (works for IE and modern browsers)
    let clipboardText = (e.originalEvent || e).clipboardData?.getData("text/plain");
    // Fallback for IE
    if (!clipboardText && window.clipboardData) {
      clipboardText = window.clipboardData.getData("Text");
    }
    
    // Insert plain text directly into the div
    document.execCommand("insertText", false, clipboardText);
  });
}

With this, when users paste content into the div, it’ll always be plain text—no more <p> or <br> tags from IE. Then you can read the content directly using oEditableDiv.textContent or oEditableDiv.innerText and your parsing logic will work just like it does in Chrome/Firefox.

Final Notes #

• Test both solutions in IE to see which fits your use case better. The second solution is cleaner if you don’t need to preserve rich formatting.
• IE’s contenteditable has other quirks, so make sure to test edge cases like multiple tabs or consecutive line breaks.

内容的提问来源于stack exchange，提问作者polaris