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

17

Від автора: форми для вводу інформації, зустрічаються практично на кожному сайті. І серед них, як правило, присутні текстові поля, призначені для додавання великих обсягів тексту. Відповідно для зручності користувачів, разом з ними, дуже часто використовуються візуальні редактори, які значно спрощують форматування та оформлення тексту.

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

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

Установка Summernote

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

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

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

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

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

Вихідний код тестової сторінки.

Summernote

Summernote

Super simple WYSIWYG editor on Bootstrap

Форма

Поле 1
Поле 2
Текст

Відправити

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

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

Відповідно, натискаємо на посилання «Download compiled» і завантажуємо архів з исходниками редактора. Після розпакування скачаного архіву, отриманої в папці, ми знайдемо наступні файли.

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

Бібліотеки summernote.js, або її копію стиснутої summernote.min.js, копіюємо в каталог зберігання скриптів JavaScript, у моєму випадку це папка js, та підключаємо до сторінки, на якій буде розташовуватися візуальний редактор.

Так само в папку «js», копіюємо каталоги «lang», з набором доступних локалізацій і «plugin», в якій, зберігаються плагіни редактора. Потім підключаємо російську локалізацію.

Так само не забуваємо, скопіювати файл summernote.css, в папку стилів тестового сайту і так само його підключити.

Тепер, хотів би зазначити, що для роботи візуального редактора, необхідний фреймворк «Bootstrap», який вже підключено на тестовій сторінці, так як її верстка виконана, як раз з використанням функціоналу цього фреймворку (завантажити даний фреймворк, можна з офіційного сайту). Так само для коректного відображення елементів керування, необхідна бібліотека безкоштовних шрифтів «Font Awesome», яку можна завантажити за наступним посиланням. І звичайно, ж бібліотека JQuery яку я підключив з віддаленого сервісу компанії Google.

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

jQuery(function($) {
$(«#text»).summernote();
});

Тобто за допомогою бібліотеки jQuery, здійснюємо вибірку текстової області за ідентифікатором і викликаємо метод summernote(). При цьому в браузері ми побачимо наступне.

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

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

Основні налаштування

Тепер давайте розглянемо налаштування візуального редактора Summernote. Для цього, в якості першого параметра, при виклику методу summernote(), необхідно передати літерал об’єкта, з налаштуваннями.

jQuery(function($) {
$(«#text»).summernote({
lang:’uk-ua’,
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, то можливість перетягування в текстову область буде відключена.

При цьому на екрані ми побачимо наступне.

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

Елементи управління редактора, так само можна, досить легко налаштувати під себе, використовуючи властивість «toolbar». При цьому, в якості значення, дане властивість приймає масив, наступної структури.

[groupname,[list buttons]]

Де, groupname – довільне ім’я групи, так як всі кнопки редактора об’єднуються в групи; list buttons – кнопки редактора, які являють собою комірки масиву. Повний список доступних кнопок, можна знайти в довідковій інформації.

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

Виходячи з вище сказаного, можна власноруч сформувати панель управління редактора.

$(«#text»).summernote({
lang:’uk-ua’,
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

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

Отже, отримати дані, які додані в текстову область, можна, використовуючи метод code(). При цьому, для виклику методу, необхідно після ініціалізації редактора (виклику методу summernote()), повторно викликати метод summernote(), для цікавить текстової області, і в якості першого параметра, передати, ім’я цікавить методу, а як наступних – параметри, необхідні викликається методів роботи. Тобто, для отримання даних, які ви додали в редактор, необхідно прописати наступне.

$(«#text»).summernote(‘code’);

Якщо ж передати як параметр, якийсь текст, то він замінить введені в редактор дані.

$(«#text»).summernote(‘code’,’hello’);

Для додавання даних в текстову область, існуючих, необхідно використовувати наступний метод.

$(«#text»).summernote(‘editor.insertText’,’hello’);

Виділення тексту в редакторі, можна отримати, використовуючи метод createRange().

$(«#text»).summernote(‘createRange’);

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