КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

WYSIWYG imperavi redactor

Привет. Я до недавнего времени даже как-то не задумывался о существовании таких вот штук, пока не увидел его в админке одного сайта и сразу же решил выдрать его оттуда для своего вооружения Называется сие чудо просто redactor и базируется по адресу http://imperavi.com/redactor. Дорогая штука, я вам скажу, аж 200 гринов просят.. Но старые версии вроде как бы бесплатно можно скачать, а у меня как раз такая - 2015 года. Так что будем считать, что нам несказанно повезло)

Пришлось малость поиграться, но в итоге он был благополучно вытащен на свет божий и освоен. Замечтательная вещь для админпанелей блогов и прочих сайтов, не всё правда можно на нём запилить не зная 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);
Я всё запилил, берите пользуйтесь. Полная документация по этому чуду здесь.
2017.07.31 84
jpg

Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика