所见即所得，可以限制文本/高度

Question

好的，所以我尝试了tinyMCE。

在没有运气和对如何限制编辑器内容进行了大量研究之后，我正在寻找其他替代方案。

这些是所见即所得的需求：

• 能够具有这些功能/按钮：粗体、斜体、下划线、牛列表、表格控件
• 能够限制输入。如果我将编辑器设置为 300 宽 x 500 高，并且您输入的内容超过该高度，则它不应该应用滚动条，并且您应该无法编写更多内容。
• 可以在一页内设置多个编辑器

哪个所见即所得的编辑器可以满足我的需求？

Answer 1

一种简单的方法是使用 div 元素并将编辑器的内容放入该 div 中。 div 应该设置宽度（使用 css）。

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

CSS 应该类似于：

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

每次击键后，您可以测量 div 的高度（使用 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;
}

Answer 2

TinyMCE 或 ck 编辑器应该可以满足您的需求。

关于滚动问题，尝试使用jquery和keypress事件来测试持有编辑器的div中内容的长度。您还可以将其与屏幕上的字符计数器结合起来，以动态显示用户还剩多少个字符。

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