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, '');

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

Обучение

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

Краткий пошаговый путеводитель .

Мозилла Путеводитель . У него самая удобная ссылка на API, которую я нашел, а также еще несколько ссылок.

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

Answer 2

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

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

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