Как стать автором
Обновить

Подсветка текста в «TextArea»

JavaScript *
Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (WYSIWYG).
Пример можно посмотреть, в google.docs или на некоторых продвинутых форумах.

Уверен, многим это будет интересно.

Атрибут contentEditable и параметр designMode


Именно contentEditable или designMode и делает для нас всю основную «грязную» работу.

Если этот атрибут поставить в тег, то всё, что внутри тега, становится автоматически редактируемым.

<html><head></head><body>
  <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div>
</body></html>
работающий пример

Этот атрибут не поддерживается сейчас некоторыми старыми браузерами (например, FireFox 2.0). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —
designMode
Всего голосов 64: ↑55 и ↓9 +46
Просмотры 18K
Комментарии 28

Взгляд в ближайшее будущее: Firefox 4

Firefox
Во блоге Ajaxian и во блоге Mozilla Hacks появились блогозаписи о том, каков будет грядущий Firefox 4.

Главная новость: Firefox 4 станет окончательным номером той альфа-версии браузера, которая была до этого известна нам в качестве Firefox 3.7.

Одна из основных инноваций Firefox 3.7 (а именно, вычленение плагинов в отдельный процесс) ужé выпущена в составе Firefox 3.6.4.

Помимо неё, в Firefox 4 появятся вот какие новинки:

→  Поддержка SVG и MathML прямо внутри HTML5, без необходимости прибегать к строгому XHTML и пространствам имён.

→  Интерпретатор HTML5 в отдельном потоке, поэтому интерфейс браузера не будет тормозить в момент обработки крупных страниц.

→  Интерпретатор HTML5 будет поддерживать HTML5 forms.

→  Вызов innerHTML станет работать быстрее (примерно на 20%).

→  Поддержка WebSockets (вебоприложения получат дуплексную связь с вебосервером).

→  PushState улучшит AJAX-взаимодействия.

→  Новые средства взаимодействия с вебостраницами: жесты, многотык (multi-touch).

→  Улучшенная поддержка CSS3.

→  Редактируемое содержимое страниц (contentEditable).

→  IndexedDB: структурированное JSON-подобное (а не SQLite-подобное, как было прежде) хранилище данных.

→  Интерфейсы для доступа к микрофонам и вебокамерам посетителей сайта.

Читать дальше →
Всего голосов 140: ↑93 и ↓47 +46
Просмотры 992
Комментарии 126

Content editable в HTML5

HTML *
Из песочницы
HTML5
Одним из нововведений HTML5 стала возможность редактировать часть страницы прямо в браузере. Эта фича получила название content editable. Она работает во всех современных браузерах. Чтобы сделать часть страницы редактируемой, нужно поставить тегу атрибут contenteditable="true". Под тегом может стоять практически всё: текст с форматированием, картинки, списки и даже flash-ролики. Но пользователь может добавлять толко текст, остольное он может только удалять. В этом посте я покажу пример использования content editable на веб-сайте.
Читать дальше →
Всего голосов 71: ↑58 и ↓13 +45
Просмотры 55K
Комментарии 28

Редакторы контента, использующие contenteditable

Разработка веб-сайтов *
На последнем Web Standards Days, проходившем в Москве, Антон Немцев рассказывал про идею редактирования контента непосредственно на странице с этим самым контентом, используя атрибут contenteditable.

Спросив google, я нашел два вполне уже рабочих редактора, которые можно попробовать применить в одном из проектов.
Читать дальше →
Всего голосов 39: ↑33 и ↓6 +27
Просмотры 6.8K
Комментарии 23

Обзор: Особенности встроенного редактирования контента

CMS *Разработка веб-сайтов *
Обзор Особенности встроенного редактирования контента.

Что нового можно придумать в технологии редактирования контента? Все уже привыкли, что для редактирования приходится вначале искать нужный материал в недрах CMS, а потом искать в большой форме то поле, в котором меняется сам текст. И хорошо, если в этом поле он будет показан с таким же оформлением, как на сайте. Но часто эта форма для управления содержимым является не только очень мощной (когда позволяет внести изменения в метаинформацию), но и избыточной. Ведь если вы забыли поставить запятую, то придётся вновь проделывать все эти операции.
Вместо этого inplace-редакторы дают возможность сконцентрироваться на самом тексте без необходимости искать материал в недрах админки.
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры 9.9K
Комментарии 1

Чистим HTML-код при вставке текста из MS Word в HTML5 WYSIWYG редактор (contenteditable)

JavaScript *jQuery *
Здравствуйте!

При написании своего WYSIWYG редактора возникла проблема копирования текста из Ворда. Собственно проблем три:
  • Ворд вставляет много мусорного html кода, который необходимо чистить
  • Для представления списков Ворд почему-то использует параграфы вместо тегов UL и LI
  • Собственно как определить, что вставленный текст является вставленным из Ворда.

В общем, для решения этих проблем, был написан jquery-плагин, полный исходный код которого доступен в конце статьи. Пример использования:

$(‘#editor’). msword_html_filter();

Плагин вешается на событие keyup и проверяет, является ли исходный код внутри редактора вставленным из Ворда, если да, то запускается функция очистки. В результирующем html прибивается все что только можно – неразрывные пробелы, атрибуты style и align, теги span, все Mso-классы, пустые параграфы.

Детали реализации под катом.

UPD Демо на CodePen

Читать дальше →
Всего голосов 55: ↑52 и ↓3 +49
Просмотры 23K
Комментарии 18

Textolite — система управления статическим сайтом

Блог компании Textolite CMS *PHP *
В последнее время в сети все чаще стали появляться обычные статические сайты, что не может не радовать. Неповоротливость некоторых популярных CMS только растет, при этом довольно часто CMS вообще не нужна. Статические сайты удобны со всех сторон, в сравнении с динамическими одни только преимущества. Такие сайты удобно разрабатывать, удобно использовать, приятно посещать, но неудобно обновлять. Решением этой проблемы может стать система Textolite, о которой я хотел бы рассказать подробнее.
Читать дальше →
Всего голосов 35: ↑22 и ↓13 +9
Просмотры 38K
Комментарии 38