Визуальный редактор своими руками
 

Всем привет.
Готовые решения не приемлю, хочу своё + опыт.

Прежде чем начать реализацию, хочу задать пару вопросов.

Реализовать редактор хочу при помощи contenteditable

Многие из вас знаю, что contenteditable ведет себя по разному в разных браузерах и даже одних и тех же браузерах, но разных версиях.
К примеру:
Переносы в хроме добавляются так <p><br></p> а в мозиле так <br> ну и разные другие особенности.

Что я хочу сделать, вот что:
Перехватывать нажатия символьных клавиш и полностью управлять вставкой символом и тегов, то-есть, отменять действия по умолчанию и полностью добавлять и удалять символы, теги и т.д.

Если подобное реализовать, будут ли тормоза при печатании или удалении символов (на средних компах)? У кого какой опыт в этом? Стоит ли вообще так делать или же это плохо?
И так ли реализованы популярные визуальные редакторы?

Откройте пару, да посмотрите. Они почти все пользуют iframe

Готовые решения все - гавно и вы лучше не сделаете. Чтобы сделать как в Ворде - надо написать еще один веб-Ворд. Боюсь там парой вопросов не обойдется.

kostyanet,
Дело в том, что мне не нужен функционал Бога. Мне хватит того, чтобы можно было задавать текст жирным, курсивом и некоторыми цветами, но то для чего я все это затеял это картинки, которые я хочу вставлять прямо в редактор и свой мини плеер на HTML5 при загрузки песен, а еще добавление смайлов и прочая мелочь.

Функционал как в Ворде ни к чему.

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

http://ckeditor.com/demo#widgets
Вот вам минимальный функционал. Можно вообще все кнопки убрать. Редактор - это очень много кода, и сложная задача. Я не думаю что у вас получится сделать что-то приличное с помощью "contenteditable".

tsigel,
Я юзал и этот редактор и многие другие. Меня ни один из них не устраивает!

Почему вы считаете, что с Contenteditable не получится реализовать нормальный редактор? Разе для этого недостаточно в современном браузере инструментов?

Contenteditable не генерит никаких событий и никакие попытки навесить таковые не увенчаются, ибо это не научно.

Попытки конечно есть, однако возникает резонный вопрос: зачем пересаживать гипофиз человека собаке, если любая баба вам нарожает людей просто за еду?

Contenteditable вообще не для этого сделан, для чего вы хотите приспособить этот атрибут. Вот например у меня есть страница ценника товара - которая для печати на бумаге. На этой странице вообще никакого интерфейса быть не может, иначе он напечатается вместе с ней. Но бывает что цена товара в бд не актуальна, или там надо укоротить или дописать наименование или еще какие-то параметры - я делаю эти элементы contenteditable='true' и операто спокойно все правит и печатает. Без сохранения, конечно.

Кстати, надо проверить еще - в файл изменения запишутся?

Проверил - так и есть, сохраняет изменения на диск. Вот и ответ для чего редактируемый контент.

kostyanet,
А какие вам еще события нужны? Чем вас не устраивают keypress, keydown и прочие? А управлять содержимым и т.д. можно через range и selection объекты. Что из этого вас смущает?

Это они вам нужны, мне-то нахрен. Вы все равно нифига не поняли и поймете только когда начнете мастырить свой лисапед. Вот и начинайте.

Вот ваш уровень

вы не различаете программу и документ. Да, в однодокументных программах типа блокнота в винде оно как бы заедино, но программно все равно это разные сущности. Вы же картинки в редактор собрались вставлять.

kostyanet,
Так я уже давным давно его начал мастырить) И все четко идет

И поэтому у данного редактора название Визуальный

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

А, вот оно что: WIX и MS FontPage скоро будут отдыхать, все бабло пойдет в шурика! :)

Интересно, а на wix'е тоже на контентэдитабле все сделано?

kostyanet,
Причем здесь прикладные программы? Речь идет о визуальном редакторе для пользователей, редактор который будет заменять простой textarea с самым необходимым функционалом для пользователя.

По-моему, вы не в теме, ей-Богу!

В чем преимущество редактируемого контента?

Знаете еще почему эти все редакторы - гавно и дебилизм? Тут я с вами согласен. В том что они дебильно работают в одном окне. Даже дебильный фронтпейдж требует нажимать ему дебильные вкладки чтоб увидеть рендер. Я никак не пойму почему ни одному дебилу не пришло в голову сделать 2 окна - для хтмля и рендера? В одном окне пишешь-правишь - в другом мгновенно все наблюдаешь. Если сильно жирно стало или там проц дохлый - можно перевести в режим по кнопке. Нажал кнопку - получил рендер текущей области.

Это просто наваждение какое-то - дебильные однооконные интерфейсы. Как будто внатури на дворе мс-дрова.

Причем все должно быть наоборот - не хтмл-сырец должен плавать поверх окна с рендером, а окно с рендером по весь браузер или сколько юзер задаст должно плавать поверх хтмля или аттачиться сверху/снизу/слева/справа.

Кто-нить видел такой редактор не для дебилов?

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

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

Открываешь 2 окна - сайт и админку. В админке правишь - щелкаешь на сайт, давишь обновить - рендер - все видно. Вот такое тупое как валенок, зато универсально стопудово меганадежное и каноничное решение. :)

Причем как правило материал не блокирую от посторонних в этом процессе. Был один раз прикол - я перепутал сайты и постил статью таким образом примерно час. Когда понял что пощу не туда, скопировал, выкосил, зашел на другой, там отпостил. Но робот гугля успел зайти падла и захавать ее на том, неправильном сайте. А когда зашел на этот правильный то само собой увидел дубль и подумал "стырили" и как-то не хотел индексировать. С тех пор я сначала пощу локально, а потом импорчу глобально.

kostyanet,
Я вас понимаю, я недавно был ещё злее когда мне пришлось заниматься проектом который на jooml'e.

В моем случае речь идет о самых обыкновенных пользователях, которые не знаю HTML и которые вместо "__)__" увидят графический смайлик в текстовом поле, которые после загрузки изображения увидят его не под полем, а внутри и это дает свою гибкость, а именно:
Пользователь сможет писать текст сверху, снизу, а так же, поместить картинку куда угодно, ко всему этому, чтобы он мог выделить текст тем или иным цветом, начертанием и т.д.
То-есть, редактор без всяких наворотов и ненужного хлама.

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

А те редакторы о которых говорите вы рассчитаны на узкий круг людей. К примеру, тех кто работает в админке той или иной CMS. И многие могут нахваливать разные редакторы констатирую это тем, что они облегчают жизнь, а кто-то может их хаять из-за недостатка функционала или потом что эти редакторы не делаются именно под их нужды.......

Разумеется, если вы хотите сверстать шаблон, то существующие на сегодняшний день веб визуальные редакторы не подходят. Пишешь код в IDE и вставляешь. А эти редакторы больше подходят оформить статью или что-то в этом роде.
В любом случае, я тему не для этого создал и вы больше чем немного отклонились от истинной сути вопроса.

В смысле что я вот рисую :) и сделав пробел получаю вместо символов - загруженный смайлик и в этом фича? Так они это все умеют - те самые редакторы. Они же наоборот устроены, не как эта система ввода на форуме. У них рабочее окно - рендер, а хтмл можно увидеть отдельно.

Ну вот общепризнанный фаворит например http://ckeditor.com/demo - рабочая демка. Все там сразу имеется.

Но эти долбоящеры хтмл вообще в том же фрейме крутят. Бл.ь, куда мир котится...

Нет, ну если вы хоть пару тегов в жизни нарисовали, вы же понимаете - это я вообще, а не ТС - что переключаться между исходником и рендером - крайне не эффективно. В направлении хтмля вам надо _запомнить_ визуальную картинку и задачу которую вы хотите выполнить в хтмле. В направлении рендера надо запомнить что вы там сделали в хтмле и что сейчас получится. Нахрен все это запоминать, если абсолютно реально сделать так, чтобы хтмл и рендер были на одной странице? Почему же не делают? Потому что убивать их надо.

Статьи на сайтах это баян. Там заранее предопределено несколько выразительных средств и все просто. Если лендинг или шаблон для сайта, я лично юзаю тупо браузер. В нем есть эта штука - инспектор - то самое счастье. Видишь хтмл, видишь рендер. Все изменения кода мгновенно рендерятся. Причем если кто не знает численные значения типа там бордеров, маржинов и паддингов можно вводить инкрементно - стрелками вверх и вниз, то есть просто подгонять как ручкой регулировки. Потом просто копирую что наваял в исходник, сохраняю и жму обновить. Если ничего не изменилось - значит скопировал все правильно, можно дальше корябать.

ЗЫ Шифт+стрелка == по основанию 10.