WYSIWYG所見即所得可以限制文本/高度

在沒有運氣和大量關於如何限制編輯器內容的研究之後，我正在尋找其他替代方案。

這些是所見即所得的需求：

能夠有這些功能/按鈕：粗體，斜體，下劃線，公牛列表，表控制
能夠限制輸入。如果我將編輯器設置爲300寬x 500高，並且鍵入的高度超過了高度，則不應應用滾動條，而應該無法再寫更多。
能夠設置多個編輯在一個頁面

其中所見即所得的編輯器能滿足我的需求？

2011-09-30 Karem

可能答案是「無」 - 這不是微不足道的。所見即所得的編輯器必須檢查每個按鍵事件*是否計劃的更改內容將超過定義的高度，並且如果是，則阻止它。很可能這樣的解決方案不存在，並需要建立（很多努力） –

@皮卡我試圖建立你在這裏提到的：http://stackoverflow.com/questions/7609104/ tinymce-remove-last-inserted-code，但它沒有效果。嗯..我能做什麼？我想在我的網站上有所見即所得，編輯器內容出現的輸出框有固定的高度+寬度，所以我需要對編輯器做同樣的事情，所以你不能輸入高於「可以」的高度。。幫助:( – Karem

一個簡單的方法是使用div元素並將編輯器的內容放入該div中。 div應該設置一個寬度（使用css）。

<div class="calculation_preview"></div>

而CSS應該是這樣的：

div.calculation_preview { 
    width: 200px; 
    visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left:0px; 
}

每個按鍵行程後，您可以測量DIV（使用股利功能的offsetHeight）的高度。如果太高，請刪除用戶輸入的最後一個字符。

要恢復以前的內容，你可以聲明一個JavaScript變量，例如：

var savedContent = "";

如果你在編輯器中一些初始化的內容，那麼你應該初始化這些內容變量。對於每個按鍵行程，請執行以下操作：

// Get current editor content: 
var content = tinyMCE.activeEditor.getContent({format : 'raw'}); 
// Measure the new height of the content: 
var measurer = document.getElementById("calculation_preview"); 
measurer.innerHTML = content; 
if(measurer.offsetHeight > 100) { 
    // Content is too big.. restore previous: 
    tinyMCE.activeEditor.setContent(savedContent, {format : 'raw'}); 
} else { 
    // Content height is ok .. save to variable: 
    savedContent = content; 
}

來源

2011-10-01 09:54:37 Javaguru

我在這裏試過你的解決方案：http://stackoverflow.com/questions/7607659/tinymce-editor-fixed-size-with-no-scrollers和http://stackoverflow.com/questions/7609104/tinymce -remove-last-inserted-code – Karem

在tinyMCE中，請告訴我如何通過這種方式刪除用戶輸入的最後一個字符？並粘貼代碼爲什麼它有可見性：隱藏 – Karem

可見性設置爲隱藏，因爲你只用它來衡量所得的div的高度;）這只是一個想法，但你可以使用tinyMCE的撤消功能。另一種可能是在添加字符之前複製內容（使用innerHTML函數），並在必要時進行恢復。 – Javaguru

TinyMCE的或CK編輯器應該滿足您的需求。

關於滾動問題，請嘗試使用jquery和keypress事件來測試持有編輯器的div內容的長度。您也可以將它與屏幕上的字符計數器結合起來，以動態顯示用戶剩餘的字符數。

charCount = $(this).val().length;

來源

2011-10-05 12:14:53 user466764

WYSIWYG所見即所得可以限制文本/高度

回答

相關問題