JavaScript текстовые редакторы

Question

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

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

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

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

Answer 1

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

Обзор

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

window.document.designMode = "On";

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

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

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

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

Учебники

Я обнаружил следующее:

Краткое пошаговое руководство .

Руководство по руководству mozilla . У него самая удобная ссылка на API, которую я нашел, а также еще несколько ссылок.

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

Answer 2

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

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

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