Editor 所见即所得;It’可以限制文字/高度

Editor 所见即所得;It’可以限制文字/高度,editor,wysiwyg,Editor,Wysiwyg,好的,我试过tinyMCE 在没有运气和大量关于如何限制编辑内容的研究之后,我正在寻找其他选择 以下是所见即所得的需求: 能够使用以下功能/按钮:粗体、斜体、下划线、牛市列表、表格控件 能够限制输入。如果我将编辑器设置为300宽x 500高,而您键入的内容超过了高度,则不应应用滚动条,您应该无法写入更多内容 能够在一个页面中设置多个编辑器 哪个所见即所得编辑器可以满足我的需要 一个简单的方法是使用div元素并将编辑器的内容放在该div中。div应该设置一个宽度(使用css) 在每个按键笔划后

好的,我试过tinyMCE

在没有运气和大量关于如何限制编辑内容的研究之后,我正在寻找其他选择

以下是所见即所得的需求:

  • 能够使用以下功能/按钮:粗体、斜体、下划线、牛市列表、表格控件
  • 能够限制输入。如果我将编辑器设置为300宽x 500高,而您键入的内容超过了高度,则不应应用滚动条,您应该无法写入更多内容
  • 能够在一个页面中设置多个编辑器

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

一个简单的方法是使用div元素并将编辑器的内容放在该div中。div应该设置一个宽度(使用css)

在每个按键笔划后,可以测量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;
}

TinyMCE或ck编辑器应满足您的需要

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

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

答案可能是“无”——这不是小事。WYSIWYG编辑器必须在每次按键事件中检查对内容的计划更改是否会超过定义的高度,如果超过,则将其阻止。很有可能这样的解决方案不存在,并且需要构建(付出很大的努力)@Pekka我试图构建您在这里提到的内容,但效果不好。隐马尔可夫模型。。我能做什么?我想在我的网站上有WYSIWYG,并且编辑器内容显示的输出框具有固定的高度+宽度,因此我需要对编辑器执行相同的操作,以便您不能输入超过“保持”高度的内容。。帮助:(我在这里尝试了你的解决方案:在tinyMCE中。那么告诉我如何删除用户输入的最后一个字符,这样做?以及u粘贴的代码为什么它的可见性:hiddenvisibility设置为hidden,因为你只使用它来测量结果div的高度;)这只是一个想法,但是你可以使用tinyMCE的撤销功能。另一种可能是在添加字符之前复制内容(使用innerHTML函数),并在必要时稍后还原。欢迎您回答我的其他问题,或者编辑此答案,说明在添加字符/在后台运行undo之前,我可以如何准确复制内容。这样可能更好,要在onChange回调中使用上述还原代码:
// 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;
}
charCount = $(this).val().length;