Я пытаюсь написать очень простой редактор wysiwyg, где пользователи могут просто добавить жирный текст, гиперссылки и маркеры, после выбора части текста. Фактически, как и CKEditor.Полужирный текст в textarea
Но насколько я знаю, нет способа добавить форматирование в текстовое поле. Поэтому я хотел бы знать, как это решают другие редакторы wysiwyg, такие как CKEditor.
Редакторы WYSIWYG, основанные на браузере, работают, создавая HTML-код для документа/текста, который вы редактируете. Другими словами, вы по существу редактируете HTML внутри браузера, а не текст в TEXTAREA. Возможно, вам стоит взглянуть на исходный код для Rich Text Editor и проверить Midas Specification Mozilla, прежде чем вы начнете писать все с нуля.
Ну, это не отвечает на вопрос о том, как они это делают, но вы можете применить стиль к текстовому пространству. Просто попробуйте:
<textarea style="font-weight:bold;"> </textarea>
того, как редакторы, как CKEditor сделать это, большинство делают это, применяя тонну яваскрипт и CSS, чтобы сделать <div> казаться <textarea>. Вот как я это сделал в классе MS на AJAX. Кроме того, если вы просмотрите предоставленный источник на CKEditor demo, вы увидите, что все для области ввода представляет собой комбинацию из <div> элементов.
Вам необходимо использовать атрибут contenteditable. Поиска Google даст вам много информации и примеров
Просто обратите внимание, что contenteditable - это HTML5, который все еще очень нов и не поддерживается широко (надеюсь, скоро хоть). –
Правда, но он доступен в последних версиях IE, Safari, Firefox и Opera. Хотя с ними трудно работать, и в каждом браузере работает по-разному. – barrylloyd
Ему не нужно * использовать 'contenteditable'. Первые редакторы WYSIWYG на основе JS были написаны задолго до того, как был введен «contenteditable». –
Большинство WYSIWYG, как TinyMCE использования чистых накладки JavaScript для того, чтобы дать богатый текстовый редактор, который ищет текстовое поле HTML-тег заменить базовый текстовый редактор с их богатым ,
Что редактор JavaScript действительно делает это добавление соответствующих HTML-теги, как < б > или < я > на содержание текста.
Именно поэтому, когда вы отправляете содержимое редактора WYSIWYG на сервер, вы обычно получаете html.
Да, похоже, нет простого способа быстро создать собственный основной редактор wysiwyg. Я также обнаружил, что вся область редактора актуальна в iframe с полным html-кодом внутри. Так как вы печатаете, ваши нажатия клавиш захватываются и i-кадр обновляется. как они вызывают мигающий куркур и знают, что текущая позиция курсора в iframe все еще немного для меня загадка. Но я знаю, что мне теперь нужно делать: я просто использую ckeditor и резко уменьшаю функции, вместо того, чтобы писать собственный базовый редактор. –