Question

我正在为养鱼网站编写一个量身定制的WordPress CMS。目前我正在研究物种概况，其中包括一些小的田地（属，种，饮食，兼容性等）。

我想使用内置的TinyMCE富文本编辑器，但是WordPress似乎只允许在大的“Post”框中使用这个编辑器，我根本就没有使用它。

因此，我正在研究其他WYSIWYG编辑器，但我有一些确切的要求：

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

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

单行textarea，带有粗体和斜体工具栏项，宽度约为200px
带有b，em，ol，ul，specialchars的四行textarea，宽度为200px的拼写检查
十二行textarea与b，em，ol，ul，specialchars，拼写大约400px宽度

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

我尝试过使用ckeditor，但是我得到一个奇怪的错误，其中所有工具栏项都显示在垂直列而不是行中，我在论坛上找不到任何支持。

有没有人对这种灵活的富文本编辑器有任何建议？

提前致谢，

修改

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

因此，我想补充两项要求：

键盘快捷键必须适用于最新版本的FireFox，Internet Explorer和Chrome
最多，编辑器必须只将jQuery声明为依赖

Answer 1

看看这个

YUI editor
nicedit
https://code.google.com/p/wmd/
http://livepipe.net/projects/control_textarea/
https://code.google.com/p/jwysiwyg/

希望你能用它

Answer 2

所以要有两个不同大小的实例，你可以单独初始化它们并给出不同的宽度：

$('#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"
});

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

JavaScript WYSIWYG文本编辑器

2 个答案: