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

Question

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

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

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

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

Так как они этого добиваются?

Answer 1

Оуэн имеет правильную идею. Эти библиотеки заменяют текстовое поле на 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 2

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

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

Answer 3

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