Pull to refresh

Suit Up! Простой и легкий WYSIWYG

Website development *JavaScript *jQuery *
Tutorial


Статья делится на три части:
UPD Критика


Вступление


Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.


Простейший редактор


Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:
<div contenteditable></div>

Редактор готов!
Читать дальше →
Total votes 95: ↑90 and ↓5 +85
Views 56K
Comments 88

Необычный редактор меню — Drop Down Menu Generator

Website development *
Sandbox
Меню

Меню это самый простой, быстрый и удобный способ навигации. От того, на сколько хорошо сделано меню, зависит успех сайта. Существует множество примеров создания меню и готовых библиотек. С их помощью можно вставить выпадающее меню в страницу. Но, к сожалению, почти все они имеют следующие недостатки.

  • Плохая совместимость с популярными браузерами

    Это самая острая проблема. Практика показывает, что даже если пример сделан с учетом современных стандартов, то это не гарантирует, что он будет одинаково хорошо работать под современными браузерами. А более ранние, но популярные сегодня браузеры, не полностью поддерживают современные стандарты.



Читать дальше →
Total votes 18: ↑6 and ↓12 -6
Views 5.8K
Comments 16

Работаем с документами в браузере с помошью jDoc

JavaScript *
Sandbox
Думаю, что большинство из нас очень часто использует отличный сервис Google Docs. Однажды меня озарила мысль попробовать написать что-нибудь подобное, только не сервис, а библиотеку, которая решит задачу работы с документами наиболее популярных форматов непосредственно в браузере и offline! И конечно же для разработки только JavaScript и ничего более :) Так на свет родилась библиотека jDoc, которая еще находится на ранней стадии своего развития, под версией 0.1.0.
Посмотреть, что из этого вышло
Total votes 35: ↑35 and ↓0 +35
Views 37K
Comments 19

Инструмент для удобного редактирования кода прямо в браузере

WordPress *Website development *Browser extensions
Recovery mode
Sandbox


UPD: Заголовок был изменен с «IDE – зло. Давайте использовать Notepad» на более адекватный.

Иногда кажется, что разработчики некоторых крупных интернет-проектов до сих пор пишут код в Блокноте и думают, что все остальные должны поступать также. Шутка, конечно, но почему в большинстве популярных CMS до сих пор отсутствуют удобные инструменты для редактирования кода, я понять не могу. Как ни стараюсь.

Если вам иногда не хватает подсветки синтаксиса при редактировании кода в браузере — добро пожаловать под кат.
Читать дальше →
Total votes 71: ↑37 and ↓34 +3
Views 23K
Comments 44