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

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

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

автор

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

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

Установка Summernote

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

Для тех, кто не знает, визуальный редактор, или 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(). При этом в браузере мы увидим следующее.

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

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

Теперь давайте рассмотрим настройки визуального редактора 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');

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

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