JavaScript WYSIWYG文本編輯器

Question

我正在為養魚網站編寫一個量身定制的WordPress CMS。 目前我正在研究物種概況，其中包括大量的小田（屬，種，飲食，兼容性等）。

我想使用內置的TinyMCE富文本編輯器，但WordPress似乎只允許在大的“Post”框中使用這個編輯器，我根本就沒有使用它。

因此，我正在研究其他所見即所得的編輯器，但我有一些精確的要求：

• 需要是輕量級的，因為頁面上將有大約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

看看這個

1. YUI編輯
2. nicedit
3. https://code.google.com/p/wmd/
4. http://livepipe.net/projects/control_textarea/
5. 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"
});

這就是我正在使用的，你可以在“主題選項”部分的底部看到我有一個寬度聲明。