Pull to refresh
  • by relevance
  • by date
  • by rating

Подсветка текста в «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
Total votes 64: ↑55 and ↓9 +46
Views 18K
Comments 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-подобное, как было прежде) хранилище данных.

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

Читать дальше →
Total votes 140: ↑93 and ↓47 +46
Views 977
Comments 126

WYSIWYG HTML редактор в браузере. Часть 1

Website development *
Translation
Это первая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.

В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
  • Различные методы включения режима редактирования
  • Команды редактирования
  • HTML генерируемый в процессе редактирования
  • Взаимодействие с DOM
Читать дальше →
Total votes 54: ↑49 and ↓5 +44
Views 17K
Comments 11

WYSIWYG HTML редактор в браузере. Часть 2

Website development *
Translation
Это вторая часть перевода статьи о свойствах designMode и contentEditable, их поведении и особенностях.

В статье рассматриваются базовые принципы и проблемы унификации особенностей редактирования в современных браузерах. Темы рассматриваемые в статье:
  • Различные методы включения режима редактирования
  • Команды редактирования
  • HTML генерируемый в процессе редактирования
  • Взаимодействие с DOM
Читать дальше →
Total votes 50: ↑45 and ↓5 +40
Views 12K
Comments 46

WYSIWYG HTML редактор в браузере. Часть 3

Website development *
Translation
В статье описана практика использования свойств designMode и contentEditable, а так же сопутствующих API на примере создания простого текстового редактора.
Читать дальше →
Total votes 32: ↑29 and ↓3 +26
Views 9.4K
Comments 18

Content editable в HTML5

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

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

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

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

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

CMS *Website development *
Обзор Особенности встроенного редактирования контента.

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

Bootstrap-wysiwyg: крошечный текстовый редактор

Website development *JavaScript *



Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать дальше →
Total votes 156: ↑149 and ↓7 +142
Views 104K
Comments 63

Чистим 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

Читать дальше →
Total votes 55: ↑52 and ↓3 +49
Views 23K
Comments 18

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

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