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);