JavaScript WYSIWYG текстовые редакторы

Question

Я пишу сильно адаптированную CMS WordPress для сайта по рыбному хозяйству.В настоящее время я работаю над профилями видов, которые состоят из множества небольших полей (род, вид, диета, совместимость и т. Д.).

Я бы хотел использовать встроенный текстовый редактор TinyMCE,но WordPress разрешает использовать этот редактор только в большом окне «Пост», которое я вообще не использую.

Поэтому я смотрю на альтернативные редакторы WYSIWYG, но у меня есть некоторыеточные требования:

• Требуется облегчение, так как на странице будет около 15 экземпляров редактора
• На той же странице мне нужно иметь возможность устанавливать разные размерыдля разных экземпляров редактора.Некоторые будут, скажем, шириной 200px, другие шириной 400px.
• Требуется элемент панели инструментов «специальные символы» и, предпочтительно, модуль проверки орфографии, а также ваши стандартные b, em, ol и ul.
• Было бы идеально, если бы у меня было небольшое количество строк с минимизированной панелью инструментов, то есть просто жирным шрифтом и курсивом с одной строкой текста.

В идеальном мире я быхотелось бы иметь возможность настроить три разных экземпляра редактора на одной странице:

• Однострочная текстовая область с полужирным шрифтом и курсивом на панели инструментов, шириной около 200 пикселей
• Четыретекстовая область строки с b, em, ol, ul, specialchars, проверка орфографии с шириной 200 пикселей
• двенадцать строк текста с 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
2. nicedit
3. https://code.google.com/p/wmd/
4. http://livepipe.net/projects/control_textarea/
5. https://code.google.com/p/jwysiwyg/

надеюсь, что вы можете использовать его