Как вы отображаете стили в текстовой области HTML

Question

Я пытаюсь добавить разные стили в текстовую область, например, жирный, разные цвета и т. Д.

Редакторы WYSIWYG (например, tinyMCE), используемые на веб-страницах, обычно делают это, но у меня возникают проблемы при разработке, как они это делают.

Вы не можете сделать это:

альтернативный текст http://www.yart.com.au/test/html.gif

Так, как они достигают этого?

Answer 1

Обычно они накладывают текстовую область на собственный компонент отображения, например, div. По мере того, как пользователь вводит текст, javascript берет введенный контент и применяет стили в области отображения. Значением текстовой области является текст с тегами html, необходимыми для его отображения в указанном стиле. Таким образом, видимый пользователь видит стилизованный текст.

Это, конечно, упрощенное объяснение.

Answer 2

Оуэн имеет правильную идею. Эти библиотеки заменяют текстовое поле на iframe, а затем переводят документ iframe в режим designMode или contentEditable. Это буквально позволяет вам редактировать HTML-документ в iframe, в то время как браузер затем обрабатывает курсор и все нажатия клавиш для вас и дает вам API, который может быть вызван для изменения стиля (полужирный, курсив и т. Д.). Затем, когда пользователь отправляет форму, он копирует innerHTML из iframe в исходную текстовую область. Для получения более подробной информации о том, как включить этот режим и что вы можете с ним сделать, смотрите: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla

Однако я предлагаю вам использовать одну из существующих библиотек управления расширенным текстом, если вы хотите использовать эту возможность на своем сайте. Я уже создал один из них и обнаружил, что вы потратите огромное количество времени на устранение несоответствий браузера, чтобы получить что-то, что хорошо работает. Помимо различий в способах включения функций редактирования, вы также захотите нормализовать созданный HTML. Например, IE создает элементы <br>, когда пользователь нажимает клавишу ввода, а FF создает теги <p>. Для изменения стиля IE использует <b>, <i> и т. Д., В то время как FF использует интервалы с атрибутами стиля.

Answer 3

Я считаю, что tinymce специально использует таблицу / iframe для отображения (которая заменяет существующую текстовую область). Когда вы будете готовы сохранить его, он скопирует всю информацию обратно в текстовую область для обработки.