JavaScript 所见即所得的文本编辑器

Question

我正在为一个养鱼网站编写一个高度定制的 WordPress CMS。目前，我正在研究由大量小字段（属、物种、饮食、相容性等）组成的物种概况。

我想使用内置的 TinyMCE 富文本编辑器，但 WordPress 似乎只允许在我根本不使用的大“帖子”框上使用此编辑器。

因此，我正在寻找替代的所见即所得编辑器，但我有一些确切的要求：

• 需要轻量级，因为页面上大约有 15 个编辑器实例
• 在同一页面上，我需要能够为编辑器的不同实例设置不同的大小。有些会说 200 像素宽，有些会说 400 像素宽。
• 需要有一个“特殊字符”工具栏项，最好是一个拼写检查模块，以及您的标准 b、em、ol 和 ul。
• 如果我可以使用最小化的工具栏（即仅用粗体和斜体显示单行文本）的行数较少，那将是理想的选择。

在理想情况下，我希望能够在一个页面上设置三个不同的编辑器实例：

• 带有粗体和斜体工具栏项的单行文本区域，宽度约为 200 像素
• 四行文本区域，包含 b、em、ol、ul、specialchars、200 像素宽度的拼写检查
• 一个 12 行的文本区域，包含 b、em、ol、ul、specialchars，宽度约为 400 像素的拼写检查

我尝试使用单独链接的 TinyMCE 版本，它可以正常工作，但界面似乎每页只允许一个宽度。

我曾尝试使用 ckeditor，但我遇到了一个奇怪的错误，即所有工具栏项都显示在垂直列中而不是行中，并且我在他们的论坛上找不到任何形式的支持。

有人对这种灵活的富文本编辑器有什么建议吗？

提前致谢，

编辑

我现在已经尝试过 jHtmlArea（没有特殊字符或拼写检查模块，并且在 FireFox 中出现 CTRL+I 和 CTRL+B 快捷键不起作用的问题）； nicEdit（不够灵活，虽然它的简单性很可爱）和 YUI（不喜欢所需的依赖数量）。

因此，我想补充两个进一步的要求：

• 键盘快捷键必须在最新版本的 FireFox、Internet Explorer 和 Chrome 中可用
• 编辑器最多只能将 jQuery 声明为依赖项

Answer 1

所以要有两个不同大小的实例，你可以分别初始化它们并赋予不同的宽度：

$('#textarea1').tinymce({
    // Location of TinyMCE script
    script_url: '/Resources/Scripts/tiny_mce/tiny_mce.js',
    // General options
    theme: "advanced",
    plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
    // Theme options
    theme_advanced_buttons1: "cut,copy,paste,|,undo,redo,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "none",
    theme_advanced_resizing: false,
    height: 500,
    width: 700,
    // Example content CSS (should be your site CSS)
    content_css: "css/content.css"
});
$('#textarea2').tinymce({
    // Location of TinyMCE script
    script_url: '/Resources/Scripts/tiny_mce/tiny_mce.js',
    // General options
    theme: "advanced",
    plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
    // Theme options
    theme_advanced_buttons1: "cut,copy,paste,|,undo,redo,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "none",
    theme_advanced_resizing: false,
    height: 500,
    width: 500,
    // Example content CSS (should be your site CSS)
    content_css: "css/content.css"
});

这是我正在使用的，您可以在“主题选项”部分的底部看到我有一个宽度声明。

Answer 2

看看这个

1. YUI editor
2. nicedit
3. https://code.google.com/p/wmd/
4. http://livepipe.net/projects/control_textarea/
5. https://code.google.com/p/jwysiwyg/

希望你能用它