От автора: формы для ввода информации, встречаются практически на каждом сайте. И среди них, как правило, присутствуют текстовые поля, предназначенные для добавления больших объемов текста. Соответственно для удобства пользователей вместе с ними, очень часто используются визуальные редакторы, которые значительно упрощают форматирование и оформление текста.
И в данное время, наибольшей популярностью пользуются редакторы CKEditor и TinyMCE, которые обладают огромнейшим функционалом. Но очень часто, большого функционала просто не требуется, и поэтому, в данном уроке я хотел бы показать Вам очень простой, но в тоже время функциональный визуальный редактор под названием Summernote, который Вы можете использовать в своих проектах.
Установка Summernote
Официальный сайт визуального редактора Summernote, Вы найдете по следующей ссылке.
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
Для тех, кто не знает, визуальный редактор, или WYSIWYG (“What You See Is What You Get” — что ты видишь, то и получишь) редактор – это специальный скрипт, а лучше сказать библиотека скриптов, благодаря которым текст, добавляемый или редактируемый в области редактора, будет выглядеть так же, как и на странице сайта. То есть с тем же шрифтом, отступами, цветом и т.д. При этом, управление форматированием текста, осуществляется специальными элементами управления редактора. И соответственно, пользователь, который вообще не знаком с HTML тегами, легко сможет, выполнить редактирование данных.
Для данного урока, мы будем использовать, следующий тестовый сайт.
Исходный код, тестовой страницы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!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, и подключаем к странице, на которой будет располагаться визуальный редактор.
| 1 | <script src="js/summernote.js"></script> |
Так же в папку “js”, копируем каталоги “lang”, с набором доступных локализаций и “plugin”, в которой, хранятся плагины редактора. Затем подключаем русскую локализацию.
| 1 | <script src="js/lang/summernote-ru-RU.js"></script> |
Так же не забываем, скопировать файл summernote.css, в папку хранения стилей тестового сайта и так же его подключить.
| 1 | <link href="css/summernote.css" rel="stylesheet"> |
Теперь, хотел бы отметить, что для работы визуального редактора, необходим фреймворк “Bootstrap”, который уже подключен на тестовой странице, так как ее верстка выполнена, как раз с использованием функционала данного фреймворка (скачать данный фреймворк, можно с официального сайта). Так же для корректного отображения элементов управления, необходима библиотека бесплатных шрифтов “Font Awesome”, которую можно скачать по следующей ссылке. И конечно, же библиотека JQuery которую я подключил из удаленного сервиса компании Google.
Теперь, когда скачаны и подключены основные элементы, необходимо вызвать на исполнение основной метод библиотеки summernote.js, для отображения визуального редактора. Для этого в файл script.js, добавим следующий код (данный файл, в моем случае так же подключен к тестовой странице).
| 1 2 3 4 5 | jQuery(function($) { $("#text").summernote(); }); |
То есть при помощи библиотеки jQuery, осуществляем выборку текстовой области по идентификатору и вызываем метод summernote(). При этом в браузере мы увидим следующее.
На этом установка редактора завершена.
Основные настройки
Теперь давайте рассмотрим настройки визуального редактора Summernote. Для этого, в качестве первого параметра, при вызове метода summernote(), необходимо передать литерал объекта, с настройками.
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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”. При этом, в качестве значения, данное свойство принимает массив, следующей структуры.
| 1 | [groupname,[list buttons]] |
Где, groupname – произвольное имя группы, так как все кнопки редактора объединяются в группы; list buttons – кнопки редактора, которые представляют собой ячейки массива. Полный список доступных кнопок, можно найти в справочной информации.
Исходя из выше сказанного, можно собственноручно сформировать панель управления редактора.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $("#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(), для интересующей текстовой области, и в качестве первого параметра, передать, имя интересующего метода, а качестве последующих – параметры, необходимые вызываемым методам для работы. То есть, для получения данных, добавленных в редактор, необходимо прописать следующее.
| 1 | $("#text").summernote('code'); |
Если же передать в качестве параметра, некий текст, то он заменит введенные в редактор данные.
| 1 | $("#text").summernote('code','hello'); |
Для добавления данных в текстовую область, к существующим, необходимо использовать следующий метод.
| 1 | $("#text").summernote('editor.insertText','hello'); |
Выделенный участок текста в редакторе, можно получить, используя метод createRange().
| 1 | $("#text").summernote('createRange'); |
Собственно вот и все, что я хотел рассказать Вам в данном уроке. Всего Вам доброго и удачного кодирования!!!
Бесплатный курс «Full-Stack практика»
Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS
Получить курс
А не подскажите как картинки потом вывести в этом редакторе.
Т.е я картинку вставляю, сохраняю все, картинка пишится в базу в виде кода base64, потом я перезагружаю страницу и картинка не отображается в редакторе, код ее есть если посмотреть исходный код, го как саму картинку то увидеть ?
Здравствуйте!
Только что проверил — сохранил информацию редактора в базу данных, а затем отобразил сохраненные данные непосредственно в редакторе — все в норме изображение отображается. Скорее всего у Вас где то ошибка, возможно при сохранении данных.
Виктор, такая проблема действительно есть. В бд картинки сохраняются в формате base64. Бд, в свою очередь, обрезает огромный кусок кода img. Картинки не выводятся попросту. Подскажите, как решить проблему. Спасибо
Здравствуйте, не подскажете как возможно сделать что бы вставленное видео вставлялось вот так
тоисть в вставлялся в ?
Заранее спасибо!