固定框的最佳 JavaScript WYSIWYG 解决方案答案

【问题标题】：Best JavaScript WYSIWYG solution for a fixed box固定框的最佳 JavaScript WYSIWYG 解决方案
【发布时间】：2012-03-20 19:57:41
【问题描述】：

我有一个正好是 425px x 100px 的盒子，我希望我的用户使用所见即所得的编辑器来设计这个盒子的内容。他们应该能够使用此框内的几乎所有 HTML。

不，我正在寻找合适的所见即所得编辑器，我曾经使用TinyMCE 来解决这类问题，但我认为它最适合长连续文本，但现在我有一个固定框。

如果编辑器能够绝对定位文本和图像，那就太好了，这样用户就可以将他们的内容定位在此框中的任何位置。

【问题讨论】：

您是否需要一个允许用户将 html 元素绝对放置在固定容器中的网络应用程序？
是的，某种所见即所得的编辑器。这是针对固定容器优化的。

标签： javascript html tinymce wysiwyg

【解决方案1】：

http://ckeditor.com/

我发现 ckeditor 很有用，具有丰富的图像或文本功能，允许您使用所见即所得和 html 源格式设置方法，并且它还具有固定大小的“画布”，用户可以根据需要自定义，

我实际使用它的打印屏幕，

这是源屏幕 最后我使用的是 800x500 固定尺寸的画布

【讨论】：

我也在用 Ckeditor 做类似的事情。 OP 所需但编辑器尚未支持的任何元素“定位”都可以使用自定义对话框/插件功能轻松合并。

【解决方案2】：

您可以使用 tinymce 执行此操作。要定位文本和图像修复，您需要一个自己的内容 css（请参阅tinymce documentation for the configuration parameter content_css）。您甚至可以在此 css 中定义 tinymce 内容的段落宽度，从而解决您的盒子问题。您的 box 问题的 css（放置在您自己的 css 文件中）如下所示：

p {
  width: 100px;
}

关于长度（或更好的高度），您可能需要实现自己的插件并检查编辑器内容的长度。如果已达到该长度，则删除用户刚刚尝试插入的字母/内容。

【讨论】：

如果您对这种方法有任何疑问 - 不要害羞
TinyMCE 是最好的 WYSIWYG 编辑器，有很多插件可用于免费且清晰的文档。
@Ken, Shivan：在我看来，它们都具有可比性。
如果您发现“x 比 y 好多少？”要“非常好争辩”，那么您真的应该立即关闭您的互联网连接。
这确实不是“争论”，这个词很容易被德国背景的人误解——对不起

【解决方案3】：

PageDown 是一个简单而有效的解决方案。它使用 Markdown，因此它允许 HTML 格式。但是，PageDown 包含两个脚本来清理其内容。稍加修改，您就可以允许或限制其他标签。

至于定位，正如 Thariama 所说，这很容易由您的 CSS 控制，因此对于所见即所得的编辑器来说不是问题。

【讨论】：

【解决方案4】：

http://ckeditor.com/

http://docs.cksource.com/FCKeditor_2.x/Users_Guide/Common_Tasks/Inserting_Images

【讨论】：

这个所见即所得似乎非常接近 tinymce，我找不到使用用户可以自定义的固定大小“画布”的选项。
画布的高度和宽度可以按照tariq所示进行调整。您只想关闭关闭工具栏的按钮，因为关闭工具栏会恢复一些画布空间（从而改变画布的大小）。

【解决方案5】：

根据您的需要，我建议nicedit。您也可以将其设置为轻型版本以及固定的高度和宽度。

【讨论】：