logo标签列表

JavaScript所见即所得文本编辑器

javascriptjquerywysiwygtext-editorrich-text-editor
3
我正在为一个养鱼网站编写定制的WordPress CMS。目前，我正在处理物种概要文件，其中包含许多小字段（属、种、饮食、兼容性等）。
我想使用内置的TinyMCE富文本编辑器，但WordPress似乎只允许在我根本不使用的大“文章”框中使用此编辑器。
因此，我正在寻找替代的所见即所得编辑器，但我有一些精确的要求：
- 需要轻量级，因为页面上将有约15个编辑器实例。 - 在同一页上，我需要能够为不同的编辑器实例设置不同的大小。有些可能是200像素宽，其他则是400像素宽。 - 需要具有“特殊字符”工具栏项，并最好具有拼写检查模块，以及您的标准b、em、ol和ul。 - 如果我可以有少量行数的缩小工具栏，那就太理想了。例如，只有加粗和斜体以及单行文本的一行。
在理想世界中，我希望能够在单个页面上设置三个不同的编辑器实例：
- 带粗体和斜体工具栏项的单行文本区域，大约为200像素宽度 - 带b、em、ol、ul、specialchars、spellchecking的四行文本区域，宽度为200像素 - 带b、em、ol、ul、specialchars、spellchecking的12行文本区域，宽度约为400px
我尝试使用一个单独链接的TinyMCE版本，它通常工作，但界面似乎只允许每页一个宽度。
我尝试使用ckeditor，但我遇到了一个奇怪的错误，其中所有工具栏项都以垂直列而不是行的形式出现，我在他们的论坛上找不到任何支持。
有没有人对这样灵活的富文本编辑器有什么建议？
提前致谢，
编辑
我现在已经尝试过jHtmlArea（没有特殊字符或拼写检查模块，在FireFox中存在问题，CTRL + I和CTRL + B快捷键无效）；nicEdit（不够灵活，虽然它的简洁美丽）和YUI（不喜欢所需的依赖项数量）。
因此，我想添加两个进一步要求：
- 必须在最近版本的FireFox、Internet Explorer和Chrome中使用键盘快捷键。 - 最多，编辑器只能声明jQuery作为依赖项。
你可以在页面加载完成并初始化TinyMCE区域后使用JavaScript调整它们的大小。 - Andrew Jackman
嗨，安德鲁。你能给我一个如何进行这项任务的例子吗？ - turbonerd
1
你使用的是TinyMCE的jQuery版本吗？如果是，我可以给你一些代码；否则，我只能猜测一些可能的解决方案。 - Andrew Jackman
抱歉昨天没有回复，我不得不飞行，但是我在下面添加了一些我的代码。 - Andrew Jackman
Alfonso，你说得对，我没有 - 这个网站没有安全保障，因此一般公众无法访问。这可能是CSS问题，我深入探索了这个方向，但当我找不到任何关于这个问题的支持时，我放弃了不同的插件，特别是考虑到我将无法公开页面供人们调查该问题。还有一个与ckedit相关的问题，但我现在想不起来是什么了。 - turbonerd
显示剩余3条评论
2个回答
1
嗨，阿尔伯特；我已经更新了我的帖子，并分享了对这些编辑器的看法。谢谢。 - turbonerd
我确实尝试过jwysiwyg，但是找不到任何文档，所以我挣扎了一会儿，感到沮丧，然后决定看其他实现方式。 - turbonerd
1
jwysiwyg 在 examples 文件夹中有一些 HTML 可供您调整。 - Albert Tsang
感谢您再次更新您的帖子，阿尔伯特。Control Textarea似乎没有键盘快捷键，而WMD实时演示网站对我来说似乎无法解决。jwysiwyg提供的示例不足以帮助我解决编辑器的问题。 - turbonerd
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"
});

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

我现在正在做这个，安德鲁，希望它会正是我想要的。一旦我解决了插件未加载的小问题，稍后我会回来并把“正确答案”的奖项授予你..！ - turbonerd
Andrew，我在WordPress堆栈上发布了我遇到的问题，因为我认为可能存在兼容性问题。以防万一是与我的tinyMCE安装有关，你能否快速查看一下？URL在这里：http://wordpress.stackexchange.com/questions/37359/wordpress-tinymce-failed-to-load - turbonerd
1
dunc，抱歉我没有及时回复，这是假日季节:p 无论如何，看起来tiny_mce添加的插件找不到了。在上面的脚本中有一个script_url属性，请确保它设置正确，并确保与tiny_mce.js相同目录中的所有与tiny_mce相关的插件都已正确设置。 - Andrew Jackman
不用担心，安德鲁，我非常感激你的建议 :) script_url 肯定已经正确设置了（最初它没有设置，脚本根本无法加载）。tiny_mce 目录的布局是 langs、plugins、themes 和 utils 目录，我认为这是正确的。奇怪的是，Firebug 调试似乎表明问题来自于对 jquery.js 的外部调用，这可能意味着它是 WordPress 兼容性问题，我怀疑。 - turbonerd
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接