CKEditor中文本的最大寬度

我需要檢查用戶輸入的文本寬度，如果超出最大值，則不允許進一步輸入。我知道如何使用當前字體和字體大小來測量div中文本的寬度。我用下面的函數測試文本的寬度：CKEditor中文本的最大寬度

editor.on("change", function (ev) { 
      var imprintText = editor.getData(); 
      var textWidth = measureText(imprintText); 

      var hfMaxImprintWidth = document.getElementById("<%=hfMaxImprintWidth.ClientID%>"); 
      var maxWidth = hfMaxImprintWidth.value; 

      if (textWidth >= maxWidth) { 
      }; 
     });

但我不知道如何保持額外的字符被添加到textarea。我還想將文本限制爲一行（不換行或新段落）。有人可以幫助我嗎？謝謝！

來源

2014-01-08 Dan-BTP

你是指渲染寬度或字符數量？意思，'measureText（）'做什麼？它應該返回類似'300px'還是'54'？你怎麼測量它在一個div裏面？如果這樣的話，爲什麼不將'imprintText'插入臨時div，測量並使用該計算？ – Nenotlep

這就是'measureText'所做的：它將文本放在一個臨時div中，並以像素爲單位返回其寬度。如果已經達到或超過這個最大寬度，我想知道如何攔截CKEditor，將下一個字符添加到文本框中。我想停止在編輯器窗口中允許更多輸入。 –

需要很長時間才能成爲評論 - 多合適。

聽起來像我會通過使用解決方法解決的問題。例如，如果文本太長，請將CKEditor背景色設置爲紅色並防止保存。就像一些網站做評論 - 例如，stackoverflow顯示「太長了27個字符」。在保存時做類似的消息：顯示一條警告，告知用戶他們的內容太多，但只留下字符數。至於「沒有換行符或新段落」 - 這可能會更復雜一點。高級內容過濾器可以輕鬆處理換行符，但對於一個段落而言，我認爲您可以執行的操作是在保存期間再次檢查並提醒用戶。

至於自動欺騙，如何捕獲key事件和檢查if (evt.data.keyCode === 13) {}和刪除可編輯的新元素。

更好的是，如果enter鍵事件是可取消的，你可以試試evt.cancel()以及完全忽略它。對不起沒有示例代碼。

來源

2014-01-10 07:18:57 Nenotlep

謝謝！這很有幫助。 –

CKEditor中文本的最大寬度

回答

相關問題