RSS
 

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

25 Фев

Недавно в сети обнаружил очень удобный и легкий визуальный редактор jHtmlArea. Платформой для движка служит jQuery.
Радует удобная и гибка настройка порядка иконок в панели инструментов.
Работает на всех распространенных браузерах, даже на IE6.

Supported Browsers

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

jHTMLArea
Инициализируется jHtmlArea:

  1. $("textarea.wysiwyg").htmlarea({params});

На одной странице можно делать несколько редакторов поверх

  1. <textarea class="wysiwyg">

Для расширения функциональности есть очень удобный метод pasteHTML(), пример:

  1. $("textarea[name=html]").htmlarea({
  2. toolbar: ["html", "bold", "italic", {
  3. css: "smile",
  4. text: "&#1042;&#1089;&#1090;&#1072;&#1074;&#1080;&#1090;&#1100; &#1089;&#1084;&#1072;&#1081;&#1083;&#1080;&#1082;",
  5. action: function (btn) {
  6. this.pasteHTML(":-)");
  7. }
  8. }
  9. ]});

Чтобы эта новая иконка (smile) появилась в тулбаре, достаточно в CSS прописать:

  1. div.jHtmlArea .ToolBar ul li a.smile {background: url(img/smile.png) no-repeat 0 0;}

В параметрах можно указать какой CSS будет использоваться в редактируемом документе, очень удобно, позволит сделать так, что будем видеть точно так же, как и на сайте.</p> <p>Мелкое неудобство, это фиксированная ширина поля ввода, причем у textarea тоже, но это легко исправляется, достаточно убрать из кода изменение ширины полей ввода. Еще ошибка с не обработкой событий клавиатуры и мыши у визуального редактора, замените $(this.editor.body).click(fnTA)… на $(this.editor).click(fnTA)…

Очень удобный на мой взгляд редактор!

 
2 Comments

Posted in HTML и CSS, JavaScript

 

Теги: , , ,

Если понравился пост, то подпишитесь на новые!

Введите свой E-mail:

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

 
 
 
 

  1. fuzaylov

    30.05.2010 at 18:59

    Согласен с вами! Приходится немного текст подчищать! Но jHtmlArea еще не пробовал, жду комментарии тех кто испытает его в действии…

     

  2. ZeroXor

    30.05.2010 at 13:56

    Столько уже перепробовал разных визивигов – пока не встретил ничего приличного, не захламляющего вводимый текст кучей тегового «мусора». Надеюсь, с jHtmlArea повезет. Спасибо.