Редакторы Rich Text Editor - программирование

Есть несколько (очень хороших) текстовых редакторов, написанных в Javascript (например, FCKeditor, YUI Texteditor и многие другие).

Однако я не смог найти учебник о том, как создать такой компонент. Что-то, что объясняет как соображения высокого уровня (архитектура), так и более подробную информацию в "критических" точках низкого уровня (то есть, почему большинство редакторов там используют iFrame, как вы обрабатываете ввод с клавиатуры, например Ctrl-B, Ctrl -C, когда текст выбран, а когда нет и т.д.)

Моя главная мотивация - любопытство; если бы мне пришлось разработать такой редактор сегодня, я бы не знал, с чего начать.

Кто-нибудь знает какой-либо учебник, который охватывает вышеупомянутые проблемы (в идеале, что-то, что объясняет, как создать редактор wysiwyg с нуля)?

Ответы

Ответ 1

После нескольких исследований я нашел следующее. Функциональность для создания богатого текстового редактора уже реализована в браузере. IE первым создал такой API, и Firefox реплицировал его.

Обзор

Главное, что объект javascript "document" имеет свойство, называемое designMode, которое может быть установлено на "on". Это преобразует всю страницу в компонент, похожий на textarea. Представьте, что браузер открывает страницу так же, как MS-Word: пользователь может видеть форматирование, но он также может вводить страницу (обычно браузер открывает страницу как только для чтения).

window.document.designMode = "On";

Поскольку вышеупомянутое влияет на всю веб-страницу, большинство редакторов используют iFrames, так что редактируемая область - это только iFrame, у которой есть собственный объект документа.

Кроме того, существует API, который позволяет легко javascript-доступ к стилю. При этом вызывается метод execCommand(). Например, вы можете позвонить из Javascript

document.execCommand('bold', false, '');

и выделенный текст станет полужирным.

Учебники

Я нашел следующее:

Краткий шаг за шагом руководство.

A mozilla руководство. Он имеет самую удобную ссылку API, которую я нашел, а также еще несколько ссылок.

Руководство по microsoft.

Ответ 2

Используйте свое любопытство, чтобы мотивировать вас просто открыть исходный код в вашем любимом редакторе и начать изучение. Поскольку эти редакторы написаны на JavaScript, ответы бесплатны для поиска.

Я понимаю, что вы ищете что-то более легко перевариваемое, но чтение исходного кода может быть очень полезным.

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