JavaScript текстовые редакторы
В Javascript есть несколько (очень хороших) веб-редакторов форматированного текста (например, FCKeditor, YUI Texteditor и многие другие).
Однако я не смог найти учебник о том, как создать такой компонент. Что-то, что объясняет как высокоуровневые соображения (архитектура), так и / или больше деталей в низкоуровневых "критических" точках (то есть, почему большинство редакторов там используют iFrame, как вы обрабатываете ввод с клавиатуры, например Ctrl-B, Ctrl-C когда текст выделен, а когда нет и т. Д.)
Моя главная мотивация - любопытство; если бы мне пришлось сегодня разрабатывать такой редактор, я бы не знал, с чего начать.
Кто-нибудь знает какой-либо учебник, который охватывает вышеупомянутые проблемы (в идеале, что-то, что объясняет, как создать редактор wysiwyg с нуля)?
2 ответа
После дополнительных исследований я обнаружил следующее. Функциональность для создания 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.
Используйте свое любопытство, чтобы мотивировать вас просто открыть исходный код в вашем любимом редакторе и начать исследовать. Поскольку эти редакторы написаны на JavaScript, ответы на них бесплатны.
Я понимаю, что вы ищете что-то более легко усваиваемое, но чтение исходного кода может быть очень полезным.
Начать создание редактора может быть так же просто, как взять существующий редактор с открытым исходным кодом и изменить его в соответствии с вашими особыми потребностями.