WYSiWYG на JQuery
Визуальные редакторы очень популярны сейчас, так как являются универсальным средством редактирования информации и призваны облегчить её изменение. Главный плюс подобного рода редакторов это то, что результат редактирования текста можно увидеть сразу, ещё до отправки на сервер.
Именно такой редактор мы сегодня и напишем
Сперва приведу пример такого редактора
А теперь о том как написать подобную штуку.
Для начала нам понадобится сам jquery который можно скачать с официального сайта фрэймворка, а так же нам понадобится библиотека jquery.wysiwyg.js которую вы сможете найти на code.google.com
или же всё это в сборе вы можете скачать у меня на сайте тут
Я посчитал, что в исходном варианте очень неудобно сделано редактирование html кода и решил немного модифицировать код
Вот что я изменил в исходном варианте
строка 265
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | html : { visible : false, exec : function() { if ( this.viewHTML ) { this.setContent( $(this.original).val() ); $(this.original).hide(); //document.getElementById("wysiwygIFrame").style.display="inline"; document.getElementById( $(this.original).attr(’id’) + ‘IFrame’).style.display=”inline” } else { this.saveContent(); $(this.original).show(); document.getElementById( $(this.original).attr(’id’) + ‘IFrame’).style.display=”none” //document.getElementById("wysiwygIFrame").style.display="none"; } this.viewHTML = !( this.viewHTML ); |
Что делает этот код? Он делает так, чтоб нам не вываливалось дополнительное окно с редактированием исходника, чтоб так сказать ручками можно было поправить.
А теперь о том, как подключить это на свой сайт.
Для этого нам надо создать вот такую вот страничку:
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>Построение пользовательских интерфейсов на основе библиотеки jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type="text/javascript" src="jquery.wysiwyg.js"></script> <link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css" /> </head> <body> <div id="drag" class="myDialog"> <textarea id="wysiwyg" style="width:732px;height:200px;"> Текст </textarea> </div> <script type="text/javascript"> $(document).ready(function(){ $('#wysiwyg').wysiwyg({ controls : { bold : { visible : true, tags : ['b', 'strong'], css : { fontWeight : 'bold' } }, italic : { visible : true, tags : ['i', 'em'], css : { fontStyle : 'italic' } }, strikeThrough : { visible : true }, underline : { visible : true }, separator00 : { visible : true }, justifyLeft : { visible : true }, justifyCenter : { visible : true }, justifyRight : { visible : true}, justifyFull : { visible : true }, separator01 : { visible : true}, indent : { visible : true }, outdent : { visible : true }, separator02 : { visible : true }, subscript : { visible : true }, superscript : { visible : true}, separator03 : { visible : true }, undo : { visible : true }, redo : { visible : true }, separator04 : { visible : true }, insertOrderedList : { visible : true }, insertUnorderedList : { visible : true }, insertHorizontalRule : { visible : true }, separator06 : { separator : true }, separator07 : { visible : true}, cut : { visible : true }, copy : { visible : true}, paste : { visible : true }, html : { |
Обратите внимание на блок контроллеров, ими в нашем случае будут кнопки редактирования. чтоб включить или отключить какую-нибудь кнопку вам надо или просто стереть участок с ней или поставить в параметре visible значение false
На этом пример закончен. Пользуемся 
8 комментариев на "WYSiWYG на JQuery"
Перевод controls как «контроллеры» на мой взгляд не совсем удачный — здесь controls в смысле (дословно) «управляющие элементы», контроллеры по англ. controllers
А так интересно, спасибо)
мне так привычнее
Классное решение.
Вот вариант для случая, когда множество редакторов на одной странице.
document.getElementById( $(this.original).attr(‘id’) + ‘IFrame’).style.display=»inline»;
о, хорошее решение.
поправил исходник
Подскажи, пжл, как вставить тег
иПодскажи, пжл, как вставить тег <code> и <strong>
ну тут уже небольшая проблемка есть, для этого необходимо картинку будет переделать, тоесть добавить новые иконки в jquery.wysiwyg.gif а так же сделать поправочки в самом ядре по типу как для просмотра исходника дописать ещё одку функцию, в том же месте и ниже по коду в конструкторе самого редактора.. вообще откройте исходник и посмотрите как написанны другие кнопки, там всё очень просто.. можно просто скопировать любую и заменить див на стронг или код. но если честно стронг я не рекомендую вообще использовать, так как этот тэг практически не поддерживает никаких стилей кроме отступов… а вот над кодом подумаю.
не получается записать в базу данных mySQL из этого редактора
Продолжение дискуссии на форуме: link
Вы можете продолжить обсуждение этой статьи на форуме