WYSIWYG redactor - визуальный редактор

WYSIWYG "The New Redactor 3" редактор замечтательная вещь для админ-панелей блогов и прочих сайтов, не всё правда можно на нём запилить не зная html, но в основном оценка пять баллов.
Возможности редактора
- Добавлять изображения, а также редактировать их (float, alt, размер, делать их ссылками)
- Добавлять видеоролики с различных сайтов (с ютуба например)
- Вставлять ссылки
- Набор стандартных тэгов для текста - заголовки, цитата, даже код в pre
- Можно менять цвет текста а также заливать его цветом
- Делать текст жирным, наклонным, зачёркнутым
- Добавлять списки, таблицы и горизонтальную линию
- Выравнивать всё это
Как подключать и использовать
Подключаете файл js и css редактора, создаёте обычную форму и на textarea вешаете метод redactor
<form enctype="multipart/form-data"> <textarea name="text" class="wysiwyg"> <!--Вывод текста статьи из бд--> <?= $text ?> </textarea> <input type="hidden" name="art_id" value="<?= $id ?>"> <input type="submit" value="Сохранить"> </form> /** * Редактор * настройки редактора */ var wysiwygSettings = { lang: 'ru', plugins: ['fontcolor', 'table', 'fullscreen', 'imagemanager', 'link', 'video', 'inlinestyle'], buttons: ['html', 'formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist', 'image', 'table', 'link', 'alignment', 'horizontalrule', 'video'], formatting: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5'], removeEmpty: ['strong', 'em', 'span', 'p'], toolbarFixed: true, toolbarFixedTarget: '.fancybox-inner', imageUpload: 'index.php', // путь к обработчику загрузки картинок imageManagerJson: 'images/images.json', // файл, в котором будут сохраняться данные загруженных изображений для возможности вставить уже имеющиеся картинки imageFloatMargin: '10px', //imageUploadParam: $('#file_upl').data('name') || 'image', // Ключ, под которым будет массив данных загружаемого изображения, по умолчанию file }; $('.wysiwyg').redactor(wysiwygSettings);