VDS Хостинг для Ваших проектов

Bueditor – простой редактор HTML кода

Февраль 18th, 2016 Рубрики: Он-лайн

В этом посте хочу представить к услугам посетителей удобный и простой HTML редактор под названием BUEditor, доступный онлайн. О нём я узнал уже давно и с тех пор постоянно пользуюсь при написании статей для этого блога: большинство из них, включая и эту, оформлены в нём. Я к нему очень привык, доволен его работой, поэтому считаю достойным разместить его и обзор на этом блоге.

Итак, на BUEditor я набрёл, когда искал простой WYSIWYG-редактор. Но проблема в том, что большинство таких редакторов достаточно тормознутые – в буквальном смысле, т.е. работают медленно. Большинство предоставляют ограниченный набор тэгов. Но самым главным препятствием для меня является то, что они любят добавлять от себя разные вспомогательные параграфы, переносы строк и т.п. В результате создаётся слишком сложная и запутанная структура, в которой нет никакой нужды. Подобным образом работает и визуальный редактор Wordpress, которым я никогда не пользуюсь. Для меня же главной идеей было быстрое обрамление текста нужными тэгами, причём визуализация этих изменений была второстепенной, так как отличается в зависимости от применяемых стилей на каждом отдельном сайте.

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

BUEditor – редактор html кода написанный на Javascript, причём очень шустрый. В текстовое поле вводится необходимый текст и по мере надобности конкретные участки можно обрамлять HTML-тэгами. Делается это с помощью выделения нужного участка и нажатием на панели кнопки с нужным тэгом. Поддерживаются самые ходовые на практике: STRONG, EM, INS, DEL, P, BR, H1-H3, A, IMG, а также некоторые вариации их – например обычная ссылка, ссылка с nofollow, блоки с выравниванием по левому/правому краю, быстрое обрамление с помощью добавления класса/стиля. Разумеется, можно вручную вводить и другие тэги, и редактировать вставленные по своему усмотрению. Кроме того реализована быстрое преобразование строк в нумерованный и маркированный список: каждая новая строка преобразуется в отдельный элемент списка. И ещё я добавил быстрое преобразование текста в таблицу: два или больше пробела между элементами текста служат разделителем ячеек таблицы, а каждая новая строка преобразуется в новую строку таблицы. Конечно, такой способ не всегда будет давать ожидаемые результаты (не предназначен для таблиц с объединёнными ячейками), но всё же намного быстрее получается, чем вводить всю структуру с нуля вручную.
Ещё одна моя добавка – ввод тире, кавычек, красивых кавычек с помощью амперсанд-последовательностей, а эти символы мне очень часто нужны в каждой статье. Если вы знакомы с HTML, то наверняка знаете, что кавычки недопустимы в обычном тексте, поэтому грамотно их надо представлять в виде ". Здесь кстати вырисовывается ещё одно преимущество БУэдитора перед прочими визуальными редакторами. Очень часто последние автоматически пытаются преобразовать обычные кавычки в красивые, но при этом не могу разобраться где открывающая, а где – закрывающая. В итоге на многих сайтах, где текст оформлен с их помощью, полно открывающих кавычек и нет закрывающих, либо не там где они нужны. В BUEditor вы сами указываете начало и конец диапазона и вставляются всегда парные кавычки.

вид редактора BUeditor

Есть у BUEditor 2 заметные минуса:

  • Достаточно примитивный интерфейс. Изначально значки очень маленькие были, я их увеличил немного, но сам размер картинок остался малым, поэтому немного размытые. Ну и добавил несколько своих, а дизайнер я плохой, так что… В самом деле новый набор красивых иконок для кнопок бы не помешал.
  • Визуализация изменений. Хотя составленную HTML-разметку можно просмотреть (кнопка с глазом), но поскольку используется только стили браузера по-умолчанию, то ничего красивого вы не увидите. Т.е. конечный вариант может смотреться по-разному в зависимости от сайта, где будет использован и применяемых там стилей.

Впрочем ничто не мешает адаптировать его под свои нужды и проекты, подключить желаемые CSS-стили и т.д. Ведь позиционируется BUEditor как редактор для любой страницы любого сайта.

BUeditor онлайн версия (с моими доработками)
BUeditor демонстрация для non-Drupal систем
Понравился пост? Поделись с другими!
Теги: , , ,
Комментариев пока нет.

Написать комментарий

   b2bbonbone