Summernote — простой и быстрый визуальный редактор. Установка и настройка

Summernote - простой и быстрый визуальный редактор. Установка и настройка

От автора: формы для ввода информации, встречаются практически на каждом сайте. И среди них, как правило, присутствуют текстовые поля, предназначенные для добавления больших объемов текста. Соответственно для удобства пользователей вместе с ними, очень часто используются визуальные редакторы, которые значительно упрощают форматирование и оформление текста.

скачать исходникискачать урок

И в данное время, наибольшей популярностью пользуются редакторы CKEditor и TinyMCE, которые обладают огромнейшим функционалом. Но очень часто, большого функционала просто не требуется, и поэтому, в данном уроке я хотел бы показать Вам очень простой, но в тоже время функциональный визуальный редактор под названием Summernote, который Вы можете использовать в своих проектах.

Установка Summernote

Официальный сайт визуального редактора Summernote, Вы найдете по следующей ссылке.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Для тех, кто не знает, визуальный редактор, или WYSIWYG (“What You See Is What You Get” — что ты видишь, то и получишь) редактор – это специальный скрипт, а лучше сказать библиотека скриптов, благодаря которым текст, добавляемый или редактируемый в области редактора, будет выглядеть так же, как и на странице сайта. То есть с тем же шрифтом, отступами, цветом и т.д. При этом, управление форматированием текста, осуществляется специальными элементами управления редактора. И соответственно, пользователь, который вообще не знаком с HTML тегами, легко сможет, выполнить редактирование данных.

Для данного урока, мы будем использовать, следующий тестовый сайт.

Исходный код, тестовой страницы.

<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="utf-8">
 <title>Summernote</title>
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <link href="css/font-awesome.min.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet">
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/script.js"></script>
  </head>
 
  <body>
 <header class="header">
 <div class="container">
 <h1 class="text-center text-uppercase">Summernote
 <br /> 
 <small class="text-center">Super simple WYSIWYG editor on Bootstrap</small></h1>
 </div> 
 </header>
 
 <div class="content">
  <div class="container">
 <h2 class="text-center">Форма</h2>
 <form>
 <div class="form-group">
 <label for="field1">Поле 1</label>
 <input type="text" class="form-control" name="field1" id="field1" placeholder="Введите данные">
 </div>
 
 <div class="form-group">
 <label for="field1">Поле 2</label>
 <input type="text" class="form-control" name="field2" id="field2" placeholder="Введите данные">
 </div>
 
 <div class="form-group">
 <label for="text">Текст</label>
 <textarea class="form-control" name="text" id="text" placeholder="Введите данные"></textarea>
 </div>
 <button type="submit" class="btn btn-default">Отправить</button>
 </form>
 
  </div> 
 </div> 

  </body>
 
</html>

Теперь вернемся к главной странице, официального сайта редактора Summernote, на которой представлена презентация возможностей его функционала, а также приведена ссылка на страницу “Get Started”, на которой приведена инструкция по установке и настройке данного редактора, и ссылка для скачивания последней актуальной версии.

Соответственно, кликаем по ссылке “Download compiled” и скачиваем архив с исходниками редактора. После распаковки скачанного архива, в полученной папке, мы найдем следующие файлы.

Библиотеку summernote.js, или ее сжатую копию summernote.min.js, копируем в каталог хранения скриптов языка JavaScript, в моем случае это папка js, и подключаем к странице, на которой будет располагаться визуальный редактор.

<script src="js/summernote.js"></script>

Так же в папку “js”, копируем каталоги “lang”, с набором доступных локализаций и “plugin”, в которой, хранятся плагины редактора. Затем подключаем русскую локализацию.

<script src="js/lang/summernote-ru-RU.js"></script>

Так же не забываем, скопировать файл summernote.css, в папку хранения стилей тестового сайта и так же его подключить.

<link href="css/summernote.css" rel="stylesheet">

Теперь, хотел бы отметить, что для работы визуального редактора, необходим фреймворк “Bootstrap”, который уже подключен на тестовой странице, так как ее верстка выполнена, как раз с использованием функционала данного фреймворка (скачать данный фреймворк, можно с официального сайта). Так же для корректного отображения элементов управления, необходима библиотека бесплатных шрифтов “Font Awesome”, которую можно скачать по следующей ссылке. И конечно, же библиотека JQuery которую я подключил из удаленного сервиса компании Google.

Теперь, когда скачаны и подключены основные элементы, необходимо вызвать на исполнение основной метод библиотеки summernote.js, для отображения визуального редактора. Для этого в файл script.js, добавим следующий код (данный файл, в моем случае так же подключен к тестовой странице).

jQuery(function($) {

 $("#text").summernote();

});

То есть при помощи библиотеки jQuery, осуществляем выборку текстовой области по идентификатору и вызываем метод summernote(). При этом в браузере мы увидим следующее.

На этом установка редактора завершена.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Основные настройки

Теперь давайте рассмотрим настройки визуального редактора Summernote. Для этого, в качестве первого параметра, при вызове метода summernote(), необходимо передать литерал объекта, с настройками.

jQuery(function($) {
 $("#text").summernote({
 
  lang:'ru-RU',
  height:300,
  minHeight:200,
  maxHeight:400,
  focus:true,
  placeholder:'Введите данные',
fontNames:['Arial','Times New Roman','Helvetica'],
  disableDragAndDrop:true
 
 });
});

Пояснения к настройкам:

lang – локализация редактора. В качестве значения, необходимо передать тег языка;

height – высота текстовой области в пикселях;

minHeight – минимальная высота текстовой области в пикселях (меньше данного значения, нельзя уменьшить высоту текстовой области);

maxHeight – максимальная высота в пикселях (больше данного значения, нельзя увеличить высоту текстовой области);

focus – если данной настройке передать true – текстовая область получит фокус, при обновлении страницы;

placeholder – строка, которая будет отображена в редакторе до ввода каких либо данных;

fontNames – массив, имен шрифтов, доступных для выбора в панели управления редактора;

disableDragAndDrop – если передать данной настройке значение true, то возможность перетаскивания элементов в текстовую область будет отключена.

При этом на экране мы увидим следующее.

Элементы управления редактора, так же можно, достаточно легко настроить под себя, используя свойство “ toolbar”. При этом, в качестве значения, данное свойство принимает массив, следующей структуры.

[groupname,[list buttons]]

Где, groupname – произвольное имя группы, так как все кнопки редактора объединяются в группы; list buttons – кнопки редактора, которые представляют собой ячейки массива. Полный список доступных кнопок, можно найти в справочной информации.

Исходя из выше сказанного, можно собственноручно сформировать панель управления редактора.

$("#text").summernote({

  lang:'ru-RU',
  height:300,
  minHeight:200,
  maxHeight:400,
  focus:true,
  placeholder:'Введите данные',
  toolbar:[
 //[groupname,[list buttons]]
 ['insert',['picture','link','video','table']],
 ['style',['bold','italic','underline']],
 ['font', ['strikethrough', 'superscript', 'subscript']],
 ['fontsize', ['fontsize','fontname']],
 ['color', ['color']],
 ['para', ['ul', 'ol', 'paragraph','style']],
 ['height', ['height','codeview']],
 
  ],
  fontNames:['Arial','Times New Roman','Verdana'],
  disableDragAndDrop:true,
 
 });

Методы редактора Summernote

Помимо настроек визуальный редактор Summernote, поддерживает огромное количество все возможных методов, которые позволяют выполнять различные манипуляции с данными, добавленными в текстовую область. В данной статье мы рассмотрим только несколько из них, а оставшиеся, Вы при необходимости, рассмотрите самостоятельно.

Итак, получить данные, которые добавлены в текстовую область, можно, используя метод code(). При этом, для вызова метода, необходимо после инициализации редактора (вызова метода summernote()), повторно вызвать метод summernote(), для интересующей текстовой области, и в качестве первого параметра, передать, имя интересующего метода, а качестве последующих – параметры, необходимые вызываемым методам для работы. То есть, для получения данных, добавленных в редактор, необходимо прописать следующее.

$("#text").summernote('code');

Если же передать в качестве параметра, некий текст, то он заменит введенные в редактор данные.

$("#text").summernote('code','hello');

Для добавления данных в текстовую область, к существующим, необходимо использовать следующий метод.

$("#text").summernote('editor.insertText','hello');

Выделенный участок текста в редакторе, можно получить, используя метод createRange().

$("#text").summernote('createRange');

Собственно вот и все, что я хотел рассказать Вам в данном уроке. Всего Вам доброго и удачного кодирования!!!

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Евгений

    А не подскажите как картинки потом вывести в этом редакторе.
    Т.е я картинку вставляю, сохраняю все, картинка пишится в базу в виде кода base64, потом я перезагружаю страницу и картинка не отображается в редакторе, код ее есть если посмотреть исходный код, го как саму картинку то увидеть ?

    • Виктор Гавриленко

      Здравствуйте!
      Только что проверил — сохранил информацию редактора в базу данных, а затем отобразил сохраненные данные непосредственно в редакторе — все в норме изображение отображается. Скорее всего у Вас где то ошибка, возможно при сохранении данных.

      • Сергей

        Виктор, такая проблема действительно есть. В бд картинки сохраняются в формате base64. Бд, в свою очередь, обрезает огромный кусок кода img. Картинки не выводятся попросту. Подскажите, как решить проблему. Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree