Лаборатория Кода, Райтинг-Код

Поставить визуальный редактор на сайт

Поставить визуальный редактор на сайт (WYSIWYG)

Бывает так, что начинающие разработчики уклоняются от маневренности с визуальными редакторами (WYSIWYG) — часто используют то, что дают, т.е. визуальный редактор, вмонтированный в готовую CMS. Но что делать, когда речь идет о собственной разработке? Или, если визуальный редактор на готовой CMS «глючит»? На самом деле, поставить визуальный редактор на сайт довольно просто. Сейчас я занимаюсь написанием класса галереи на PHP, и мне понадобилось поставить визуальный редактор. Здесь я хочу поделиться общими принципами работы и монтажа визуальных редакторов.



Я искала визуальный редактор, приятный глазу, чтобы не пришлось переделывать дизайн и лишний раз тратить время. В процессе, я нашла и испытала несколько визуальных редакторов.Монтаж визуальных редакторов на сайт представляет простую систему действий. Нужно поставить в тег HEAD ряд запросов на скрипты (предварительно загрузив всю папку с визуальным редактором на сервер). В скаченных файлах обычно предоставляется демо-версия использования, именно из кода этой страницы легко получить названия нужных скриптов. Здесь же небольшой код, употребляемый в BODY страницы, для непостредственного использования редактора. Его мы будем размещать на место в html-форме, где нам нужно.
Визуальные редакторы делятся на виды, используя различную обработку. Так, я встретила визуальные редакторы, основанные на jQuery, MooTools, ActiveX и просто JavaScript.

 

Визуальные редакторы с использованием MooTools
Мне попались весьма интересные визуальные редакторы, основанные на этой технологии. Однако, из-за несовместимости со скриптами jQuery, уже употребляемыми на сайте для других нужд, я продолжила поиски чего-то более универсального.

 

Пример визуального редактора MooEditable с использованием MooTools

Скрипты, вставляемые между тегами <HEAD></HEAD>:

<link rel="stylesheet" type="text/css" href="../../Assets/MooEditable/MooEditable.css">
		<script type="text/javascript" src="../assets/mootools.js">
</script>
		<script type="text/javascript" src="../../Source/MooEditable/MooEditable.js">
</script>

		<script type="text/javascript">
			window.addEvent('load', function(){
				$('textarea-1').mooEditable();

				// Post submit
				$('theForm').addEvent('submit', function(e){
					alert($('textarea-1').value);
					return true;
				});
			});
		</script>

Следует обратить внимание, что ссылки на скрипты относительны — они запрашиваются из папки «Demos».
Для использования на сайте, поставьте нужный путь к скриптам на вашем сервере.

Использование в

<label for=»textarea-1″>Textarea 1</label> <textarea id=»textarea-1″ name=»editable1″> —Здесь текст, написанный в визуальном редакторе— </textarea>

Здесь используется стандартный тег формы TEXTAREA, что сделает поле ввода рабочим даже при условии отключеия
JavaScript у пользователя (хотя все опции визуального редактора работать не будут).
Скачать визуальный редактор MooEditable

 

Пример ggEdit, визуальный редактор на основе MooTools
В FireFox этот визуальный редактор («ggEdit») отказался работать вовсе. Как пользователю Mozilla, меня это совершенно не устроило.
Впрочем, интерфейс у такого визуального редактора (пример «ggEdit» (исходник можно скачать здесь)) мне понравился.

 

Визуальные редакторы на основе jQuery
Этот визуальный редактор (WKRTE), возможно, был бы хорош, если бы модульные окна (вставка изображения, ссылки) не всплывали за рамкой экрана
Пример WKRTE, визуальный редактор на основе jQuery:

Примечательно, что основные скрипты вставляются не в <HEAD>…</HEAD>, где, в основном, запросы на стили (CSS):

<HEAD>	

<!-- shitload of crap for IE -->
	<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
type="text/javascript">
</script><![endif]-->
	<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript">
</script><![endif]-->
	<!-- END -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="css/wkrte.css" />
</HEAD>

Основные скрипты окажутся перед закрывающим тегом </BODY>:

<BODY>

<textarea cols="70" rows="20" class="wkrte-1" method="post" action="#">
--Какое-то содержимое--
</textarea>

<!-- The scripts that will do all the magic -->
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="js/wkrte.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		var arr = $('.wkrte-1').rte({
			width: 720,
			height: 520,
			controls_rte: rte_toolbar,
			controls_html: html_toolbar
		});
	});
</script>

</BODY>

Скачать визуальный редактор WKRTE

Визуальный редактор AJAX, jQuery, JavaScript

Этот визуальный редактор («CKEditor») использует богатую палитру технологий в своих примерах использования. Хотя AJAX здесь выполняет скорее вспомогательные — а не ключевые — функции визуального редактора. Основная библиотека: jQuery, JavaScript.
Не проводила скрупулезного тестирования на предмет кроссбраузерности, но в моих браузерах работает на «ура», что не могло не обрадовать. Дополнительный плюс — Русский язык!


Скрипты: могут быть разные. Один из примеров:

Основная библиотека в HEAD:

<HEAD>

	<script type="text/javascript" src="../ckeditor.js"></script>
	<script src="sample.js" type="text/javascript"></script>
	<link href="sample.css" rel="stylesheet" type="text/css" />

</HEAD>

<BODY>

<textarea cols="80" id="editor1" name="editor1" rows="10">
--Какое-то содержимое--
</textarea>
			<script type="text/javascript">
			//<![CDATA[

				// This call can be placed at any point after the
				// <textarea>, or inside a <head><script> in a
				// window.onload event handler.

				// Replace the <textarea id="editor"> with an CKEditor
				// instance, using default configurations.
				CKEDITOR.replace( 'editor1' );

			//]]>
			</script>

</BODY>

Скачать визуальный редактор CKeditor

Этот материал опубликован в Лаборатория Кода, Райтинг-Код и тегирован , , . Bookmark the permalink.

6 отзывов на Поставить визуальный редактор на сайт

  1. Николай говорит:

    Ну очень доходчивое описание, особенно для начинающих, не все такие хакеры как вы! Большое прибольшое спасибо , ну очень помогает ваш урок!

  2. Дмитрий говорит:

    Описание +1!
    Сейчас попробую описанные варианты, ищу редактор себе в админку

  3. Вячеслав говорит:

    Вот на хорошую подборку скриптов набрел в поиске визуального редактора себе на сайт, спасибо блогеру!

  4. Олег говорит:

    А***нительное спасибо! Я этот редактор нашел давно.. Только при редактировании он прописывал тэги боди, хЭд, штмл.. прекачал здесь поставил по вашей инструкции.. Все работает как часы.. Моей благодарности нет придела.. Яндексу что вас показывает в выдаче))) и вам за материал!

  5. Gansta говорит:

    очень помогло ,моя искренняя благодарность,вот ещё такой маленький вопросик, как сделать чтобы верхняя панель редактора скрывалась по умолчанию ?

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

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

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