Редакторы форматированного текста javascript
Существует несколько (очень хороших) веб-редакторов с форматированным текстом, написанных на Javascript (например, FCKeditor, YUI Texteditor и многие другие).
Однако я не смог найти никакого руководства по созданию такого компонента. Что-то, что объясняет как соображения высокого уровня (архитектура), так и / или более подробную информацию в «критических» точках низкого уровня (например, почему большинство редакторов используют iFrame, как вы обрабатываете ввод с клавиатуры, например Ctrl-B, Ctrl -C, когда текст выделен, а когда нет и т. д.)
Моя главная мотивация - любопытство; если бы мне пришлось разработать такой редактор сегодня, я бы не знал, с чего начать.
Кто-нибудь знает какой-либо учебник, который охватывает вышеуказанные проблемы (в идеале, что-то, что объясняет, как создать редактор wysiwyg с нуля)?
Если вы хотите написать текстовый редактор JavaScript, вам может потребоваться получить HTML-код выделенного текста в документе, как описано здесь: stackoverflow.com/questions/5643635/…
Используйте свое любопытство, чтобы побудить вас просто открыть исходный код в своем любимом редакторе и начать изучение. Поскольку эти редакторы написаны на JavaScript, ответы на них бесплатны. Я понимаю, что вы ищете что-то более легко усваиваемое, но чтение исходного кода может быть очень полезным. Начать создание редактора может быть так же просто, как взять существующий редактор с открытым исходным кодом и изменить его в соответствии с вашими особыми потребностями.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
После дополнительных исследований я обнаружил следующее. Функциональность для создания редактора форматированного текста уже реализована в браузере. IE был первым, кто создал такой API, и Firefox его воспроизвел.
Обзор
Суть в том, что объект javascript «документ» имеет свойство, называемое designMode, для которого можно установить значение «on». Это преобразует всю страницу в компонент, похожий на текстовое поле. Представьте, что браузер открывает страницу так же, как и MS-Word: пользователь может видеть форматирование, но также может вводить текст на странице (обычно браузер открывает страницу только для чтения).
window.document.designMode = "On";
Поскольку вышеуказанное влияет на всю веб-страницу, большинство редакторов используют iFrames, поэтому редактируемой областью является только iFrame, у которого есть собственный объект документа.
Вдобавок ко всему, есть API, который позволяет легко получить доступ к стилю с помощью javascript. Это отображается методом execCommand (). Например, вы можете вызвать из Javascript
document.execCommand('bold', false, '');
и выделенный текст станет жирным.
Учебники
Я нашел следующее:
Краткий пошаговый гид.
Файл mozilla гид. В нем есть самая удобная справочная информация по API, которую я нашел, а также еще несколько ссылок.
Руководство от Майкрософт.
Это мне очень помогло. В настоящее время я комментирую сильно измененную версию вашего ответа после некоторых экспериментов :)
Спасибо, что спросили, а затем ответили на свой вопрос, это именно то, что я искал.
IIRC, iframe должен заставить Firefox работать хорошо.