17.11.2009
Javascript скрипты
скрипты

JS: HTML редактор

Визуальных редакторов на Javascript много, но у них один общий недостаток - большой размер. Немного поискав нашел не визуальный редактор, но с размером всего 6 килобайт, ссылка.

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

Изменения:

  1. Добавлен предпросмотр
  2. Добавлена возможность увеличения высоты textarea
  3. Изменен способ установки
  4. Улучшена вставка нумерованных и ненумерованных списков
  5. Изменение тулбара: картинки заменены ссылками
Демо Скачать

Подключение

1. Добавить в секцию <head> две строки с указанием путей к соответствующим файлам

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

2. Добавить к тегу <body> атрибут onload = ";edToolbar('all','300px','700px')"

<body onload = "edToolbar('textareaId','300px','700px')">

Или в конец страницы поместить

<script type="text/javascript">edToolbar('textareaId','300px','700px')</script>

edToolbar('textareaId','textareaHeight','textareaWidth')

textareaId - id тега textarea к которому подключится редактор, если нужно подключить ко всем textarea, то вместо textareaId поставить all.

edToolbar('all','300px','700px')

textareaHeight - высота textarea, задавать только в пикселях.
textareaWidth - ширина textarea, и в пикселях и в процентах.

Настройка редактора

Для изменения/добавления кнопок вставляемых html тегов нужно изменить функции tbarTop(obj) и tbarBottom(obj,oHeight).

Для отображения тулбара точно над textarea, задайте ей правый и левый отступ равным нулю

padding: 5px 0;
margin:0;

Текст в предпросмотре имеет класс preview, поэтому для него легко настроить вид внутренних элементов.


.preview a {
color:red;
}

Ранее | Позже

Комментарии (RSS)

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