NicEdit — это очень скромный WYSIWYG редактор, который со всеми расширениями весит 44 килобайта. Он основан на contenteditable свойстве, в отличие от, например, TinyMCE. Последний использует iframe, которые мне не сильно нравяться.
Но использование свойства contenteditable имеет некоторые проблемы с потдеркой в браузерах. С декстопными версиями всё хорошо. Если верить сайту caniuse.com, то всё работает в IE5.5+, FireFox 3.5+, Opera 9+, Chrome и Safari. Но с мобильными всё хуже. Можно даже сказать плохо, но кажется всё меняется. В IOS 5 всё нормально, а 4 версии еще нечего не работало (Сам проверял на Iphone 4). С Android всё хуже. В 2.х версиях тоже, нет поддержки contenteditable (проверил на Samsung Galaxy S, 2.3.3), но говорят, что в 3ей всё ОК. Opera Mini и Mobile не поддерживает (в Iphone на IOS4, точно).
Теперь приступим к использованию. Для этого качаем js-библиотеку и gif-иконки. Я использую полный скомпресированый набор. Весит он — 44КБ. Но если много, можете по убирать галочки возле ненужных элементов. Главное помнить, что если потом захотите добавить или забрать возможностей. то помните, что и gif-ку нужно поменять.
Теперь положим их в папку, и добавим туда свой html файл, в котором будем создавать наш редактор. В html файле пишем:
<html> <head> <script type="text/javascript" src="nicEdit.js"></script> <script type="text/javascript"> bkLib.onDomLoaded(function() { nicEditors.allTextAreas() }); </script> </head> <body> <textarea></textarea> </body> </html>
Тут все textarea поменяются на редакторы со всеми кнопками. Если же нужно поменять только для одного с textarea, например, с id=area, то:
new nicEditor({fullPanel : true}).panelInstance('area');
Если же нужно некоторые кнопки, то:
new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','html','image']}).panelInstance('area');
Вот список всех возможных кнопок:
- ‘bold’
- ‘italic’
- ‘underline’
- ‘left’
- ‘center’
- ‘right’
- ‘justify’
- ‘ol’
- ‘ul’
- ‘subscript’
- ‘superscript’
- ‘strikethrough’
- ‘removeformat’
- ‘indent’
- ‘outdent’
- ‘hr’
- ‘image’
- ‘upload’
- ‘forecolor’
- ‘bgcolor’
- ‘link’
- ‘unlink’
- ‘fontSize’
- ‘fontFamily’
- ‘fontFormat’
- ‘xhtml’
Теперь посмотрим, как NicEdit меняет html:
Как видите, наш textarea скрыли, а над ним появилось несколько div’ов. Верхний — это иконки, нижний — поле для редактирования. Тут важный момент. Если мы ходим работать с редактором, то нужно работать с div class=»nicEdit-main». Но если нужно отослать данные, то, например, в PHP считывать данные нужно так: $_POST['name от textarea'].
И под конец, как выглядит сам редактор:
Надеюсь вам станет полезен этот плагин. Со временем я собираюсь его перевести и дописать несколько кнопок.
UPDATE: Я перевел Nicedit на русский и украинский и выложил на GitHub.
Добрый день! Спасибо за пост и перевод. Подскажите более точно, пожалуйста, как в РНР передать данные. У меня есть:
...
...
Извиняюсь, что-то не так написал:
…
…
Так и не смог вставить код…
Вставлять код в комментарии нельзя в целях безопасности.
При передаче, для моего примера нужно: $_POST['textareaExample']