Представление wysiwyg редактора?

Question

[maksimwork1980]

Появилась потребность в создании своего визуального текстого редактора. (Готовый не подойдёт) Самый первый (хочется верить последний) вопрос - на чем редактор будет стоять, в смысле например поле для текста будет textarea, и в нём будут теги форматирования к примеру
b, div class="error", и т.д.
Такое на практике естественно не работает, а как тогда в поле текста вставлять теги? Могу ожидать сложные решения.

Comments

[hellcaster]

Можно посмотреть как работают уже готовые

[maksimwork1980]

hellcaster, как отличный вариант, но это займёт много времени. Если никто не напишет другой ответ, то придётся так (времени в обрез пока что)

[maksimwork1980]

agagaheash ashaherya4wr, а это уже интересно, надо посмотреть что он из себя представляет

Answer 1

[Aetae]

contentEditable=true
Только рекомендую прям сейчас взять и начать разбираться с готовыми редакторами. Ты не сможешь написать свой. Точнее ты не сможешь написать приемлемо-работающий свой. Поддержка wisiwig в браузерах - это ад, причём для каждого браузера свой. Багов, неожиданного поведения и прочих "особенностей" - хватит на сотню лет отладки. Безумие - вот что тебя ждёт если ты пойдёшь по этом пути.)

Comments

[maksimwork1980]

Спасибо, это то что я искал!
Но и правда, я уже столкнулся с одной проблемой, когда сделал один просто прототип :)
Т.е. вы рекомендуете забросить самостоятельное создание и пользоваться чужим?(

[maksimwork1980]

А вот нашёл реализацию с ограниченным функционалом (нет вставки фото и блоков к примеру цитат):
https://developer.mozilla.org/ru/docs/Web/Guide/HT...
Вроде всё работает

[Aetae]

maksimwork1980, внешне и примитивно - "вроде работает". Тыкните в центр и нажмите дважды enter - внешне вроде норм, но в Chrome, IE, FF и Safari - результирующий код будет разным. Ещё можете копировать кусок текста и вставить...
И это только на поверхности. Там много ада, который я уже и не упомню. Но больше туда ни ногой.)

[maksimwork1980]

Aetae, я подумал, что всё таки не готов брать чужое и готовое. Лучше буду делать с нуля и мучиться :) Опыта зато наберу!
Но за подсказку как это дело реализовывать спасибо, буду фиксить баги, когда появятся

[maksimwork1980]

Aetae, есть же стони миллионов сайтов, где свой редактор стоит

[Егор Соколов]

maksimwork1980, можно парочку примеров? Ну или штучек 5 из этой сотни миллионов. На деле может оказаться, что просто скины разные. Поменять стилизацию готового редактора и написать свой с нуля это задачи на противоположных концах одной прямой.

Answer 2

[Антон Шаманов]

мда... если у тебя на этом этапе такие вопросы, то представлю что ты там навояешь... wysiwyg скрывает textarea и отображает вместо него div/section. скрытое поле используется для сохранения созданного кода

Comments

[maksimwork1980]

Да не стоит думать на самом деле, что я сделаю. Те кто создавали свои первые wysiwyg не начинали же с 10 летним стажем в создании таких редакторов, опыт приходит со временем :)

[maksimwork1980]

Не понял только, зачем Вы предлагаете использовать скрытое поле, для какой цели оно нужно?

[Антон Шаманов]

maksimwork1980,

скрытое поле используется для сохранения созданного кода

что тут не понятно?

не начинали же с 10 летним

ты уверен?