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

Скрипты

Рисунок Визуальный редактор jHtmlArea на jQuery
Визуальный редактор jHtmlArea на jQuery Визуальный редактор jHtmlArea на jQuery
оценка: 4.5 из 5
оценок: 13

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

Нужен был визуальный редактор с базовыми функциями: жирный, курсив, подчеркнутый, выравнивание слева, выравнивание справа, и выравнивание по центру. Также, было бы хорошо, если бы была возможность создавать свои функции.

В результате поисков и изучений был выбран визуальный редактор на основе jQuery - jHtmlArea.

Этот скрипт поддерживается следующими браузерами:

  • Internet Explorer 7/8
  • Firefox 3/3.5
  • Safari 4

Пример работы скрипта:





Займемся установкой этого визуального редактора. Для начала посетим сайт проекта и скачаем ахив со скриптом: jHtmlArea-0.7.0.ExamplePlusSource.zip. Если ссылка по каким то причинам не работает, архив можно скачать с нашего портала: jHtmlArea-0.7.0.ExamplePlusSource.zip.

Из архива потребуются следующие файлы:

  • scripts\jHtmlArea-0.7.0.min.js
  • style\jHtmlArea.css
  • style\jHtmlArea.Editor.css
  • style\jHtmlArea.png
  • style\jHtmlArea_Toolbar_Group__Btn_Select_BG.png
  • style\jHtmlArea_Toolbar_Group_BG.png

Эти файлы нужно будет залить на свой хост.

Теперь можно заняться непосредственно внедрением WYSIWYG-редактора на страницу. Если пакет jQuery у вас не подключен, то вставляем следующий код в тело HEAD страницы:

Code
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

После открывающего тега BODY, или в тело HEAD вставляем следующий код:

Code
<link rel="stylesheet" type="text/css" href="/scripts/jHtmlArea/jHtmlArea.css">
<link rel="stylesheet" type="text/css" href="jHtmlArea.Editor.css">
<script type="text/javascript" src="/scripts/jHtmlArea/jHtmlArea-0.7.0.min.js"></script>

Этим кодом мы подключили jHtmlArea к странице.

Далее, нужно выполнить инициализацию скрипта. Это делается следующим кодом:

Code
$(function(){
  $('#jHtmlArea').htmlarea();
});

#jHtmlArea - это селектор элемента TEXTAREA, который используется для ввода текста. В случае с CMS UCOZ, этот селектор заменяется на #brief и/или #message.

Также, можно вывести только определенные кнопки панели инструментов визуального редактора. Для этого используется инициализация скрипта следующего вида:

Code
$(function(){
  $('#jHtmlArea').htmlarea({
    toolbar: [
      ['html'],
      ['bold','italic','underline'],
      ['p','h5'],
      ['orderedlist','unorderedlist','|','indent','outdent']
    ],
    toolbarText: $.extend({},jHtmlArea.defaultOptions.toolbarText,{
      'html': 'Отобразить/скрыть HTML исходник текста',
      'bold': 'Полужирный',
      'italic': 'Курсив',
      'underline': 'Подчеркнутый',
      'p': 'Параграф',
      'h5': 'Заголовок'
    })
  });
});

Все кнопки панели инструментов в следующем списке:

  • html - отобразить/скрыть HTML-код
  • bold - полужирный
  • italic - курсив
  • underline - подчеркнутый
  • strikethrough - зачеркнутый
  • subscript - подстрочный
  • superscript - надстрочный
  • increasefontsize - увеличить шрифт
  • decreasefontsize - уменьшить шрифт
  • orderedlist - нумерованный список
  • unorderedlist - ненумерованный список
  • indent - увеличить отступ
  • outdent - уменьшить отступ
  • justifyleft - выравнивание слева
  • justifycenter - выравнивание по-центру
  • justifyright - выравнивание справа
  • link - ссылка
  • unlink - убрать ссылку
  • image - вставить рисунок
  • horizontalrule - горизонтальная линия
  • p - параграф
  • h1 - заголовок 1
  • h2 - заголовок 2
  • h3 - заголовок 3
  • h4 - заголовок 4
  • h5 - заголовок 5
  • h6 - заголовок 6
  • cut - вырезать
  • copy - копировать
  • paste - вставить
  • | - разделитель

jHtmlArea также позволяет внедрять свои кнопки в панель инструментов со своей обработкой. В примере ниже добавляется кнопка вставки символа ° с классом degree:

Code
$(function(){
  $('#jHtmlArea').htmlarea({
    [{
      css: 'degree',
      text: 'Градус',
      action: function(btn){
        this.pasteHTML('&deg;');
      }
    }]
  });
});

Таким образом, комбинируя опции вызова, можно добиться нужного вида визуального редактора jHtmlArea.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Визуальный редактор jHtmlArea на jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:7440
Рейтинг:4.5/13
Дата добавления:2011-06-14 07:40, Вторник
Добавил:Szen
Теги:WYSIWYG, визуальный редактор, редактор

Мини-форум

№ 02011-06-14 07:40
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Визуальный редактор jHtmlArea на jQuery".
Гость
Учавствовать в обсуждении "Визуальный редактор jHtmlArea на jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Что Вы любите читать?
Всего ответов: 124
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 8
Гостей: 7
Пользователей: 1

SergeyDut
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz