WISIWYG 文本長度限制不破壞 HTML 標簽

Question

我使用 CKEditor 作為 Vue3 的所見即所得富文本編輯器。

編輯器在 IFrame 中生成 output，所以最后我猜想是一個 HTML 正文，其中包含用戶輸入的文本，由 Z4C4ADB5CEDA0E 包裹。 訪問 iframe 內容是通過document.querySelector('iframe').contentDocument完成的，它給了我 innerTextr 和 innerHTML，一切都可以訪問。

我正在嘗試限制文本長度，因此如果用戶編寫此文本： I am an example text and this part is bold. 並且限制為 23 個字符， . 字符將被自動刪除。 順便說一句，這將是編輯器生成的 output： <p>I am an example text and <b>this part is bold.</b></p>

因此，我可以通過刪除任何 HTML 標記來獲取剝離的文本，將“干凈”文本存儲在變量中，然后獲取其長度。 此外，我可以在keyup觸發器上刪除這個字母。

問題是，每當刪除一個字母時，它也會修改 HTML 標簽並破壞它們的結構。 所以我得到了這個： <p>I am an example text and <b>this part is bold而不是這個： <p>I am an example text and <b>this part is bold</b></p> 。

有沒有更好的方法來計划這種定制，所以我只會修剪內部文本。

Answer 1

我解決這個問題的方法是

1. 刪除文本，得到<p>I am an example text and <b>this part is bold
2. 檢查未關閉的標簽（ <x>的 nb 是否等於</x>的數量？），並在需要時關閉它們

可能有更好的方法，但我在大約 10 年前編寫了那段代碼，它可以很好地工作。