所见即所得可以限制文本/高度的地方答案

【问题标题】：A WYSIWYG Where it's possible to limit the text/height所见即所得可以限制文本/高度的地方
【发布时间】：2011-09-30 21:33:10
【问题描述】：

好的，所以我尝试了 tinyMCE。

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

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

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

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

【问题讨论】：

答案可能是“无”——这不是微不足道的。 WYSIWYG 编辑器必须检查每个按键事件是否对内容的计划更改会超过定义的高度，如果超过则阻止它。这种解决方案很可能不存在，需要构建（花费很多的努力）
@Pekka 我尝试构建您在此处提到的内容：stackoverflow.com/questions/7609104/…，但效果不佳。嗯..我该怎么办？我想在我的网站上使用 WYSIWYG，并且编辑器内容出现的输出框具有固定的高度+宽度，所以我需要对编辑器执行相同的操作，这样您输入的高度就不能超过可以“保持”的高度。 . 帮助 :(

标签： editor wysiwyg

【解决方案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;
}

【讨论】：

我在这里尝试了您的解决方案：stackoverflow.com/questions/7607659/… 和 stackoverflow.com/questions/7609104/…
在 tinyMCE 中。那么告诉我如何以这种方式删除用户输入的最后一个字符？而你粘贴的代码为什么它有可见性：隐藏
可见性设置为隐藏，因为您只使用它来测量结果 div 的高度；）这只是一个想法，但您可以使用 tinyMCE 的撤消功能。另一种可能性是在添加字符之前复制内容（使用 innerHTML 函数），然后在必要时恢复它..
非常欢迎您回答我的其他问题，或者编辑此答案，了解我如何在后台添加字符/运行撤消之前复制内容。
在 onChange 回调中使用上述恢复代码可能会更好：tinymce.com/wiki.php/API3:event.tinymce.Editor.onChange

【解决方案2】：

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

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

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

【讨论】：