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

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

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

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

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

Установка Summernote

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree