Я открыл документ google, кажется, что google doc - это не просто текстовая область... кажется, что это настраиваемый материал... есть ли какая-нибудь библиотека для такого рода вещей?
Как реализовать текстовый редактор Google doc?
Ответ 1
Большинство редакторов используют свойство contentEditable. Просто установка его на любом элементе HTML позволяет редактировать, копировать и вставлять, проверять орфографию, форматирование и т.д. В современных пользовательских агентах.
Однако, google docs специально не использует contentEditable. Вместо этого они внедрили свой собственный механизм рендеринга в JavaScript. Если вы не планируете проект в масштабе документов Google (т.е. У вас есть, по крайней мере, 3 человека, желающих работать полный рабочий день в механизме рендеринга), contentEditable - это путь.
Ответ 2
новые Документы Google совершенно разные для всего остального, как tinyMCE, ckEditor и similars. Вот статья, описывающая некоторые из технологий, стоящих за ней: http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml
приведенный в статье: "Чтобы обойти эти проблемы, новый редактор документов Google не использует браузер для редактирования редактируемого текста. Мы написали совершенно новую поверхность для редактирования и компоновки, полностью в JavaScript", Джефф Харрис, менеджер по продуктам, Документы Google.
Удивительно, как нет никакой реализации с открытым исходным кодом, и люди не знают об этом.
Короткий ответ заключается в том, что они реализовали каждую логику, которую будет делать графический текстовый редактор, в простом javascript (от макета, до рендеринга, ко всему остальному).
Ответ 3
Google Wave впервые выработал большинство документов Google, хотя модели совершенно разные. Начните исследования там, так как есть чему поучиться.
Если вы просто пытаетесь сделать что-то более простое, чем структурированные документы, может потребоваться mobwrite, etherpad или одна из его вилок.
Редактор может быть сложным и по существу включает в себя создание целого текстового процессора в javascript. Вот некоторые примеры этого.
С любым редактором у вас есть буфер строки или элемента, который вы должны зеркалировать в реальном времени api по выбору.
Это можно сделать с помощью API реального времени для Google Диска.
События модификации должны обрабатываться в обоих направлениях. Изменения локальной модели распространяются на модель реального времени и наоборот. Модификации локальной модели могут отображаться по мере их возникновения.
Курсоры могут обрабатываться с помощью указателей на исходном буфере, например Index Reference.
Сервер может быть реализован несколькими способами, но для этого потребуется модель операционного преобразования, поддерживающая общие структуры. Сайт протокола Wave имеет пример с использованием xml-модели.
Ответ 4
Ritzy - это новый текстовый редактор с открытым исходным кодом, который содержит настраиваемый механизм обработки и компоновки JavaScript, как Google Docs. Взгляните на это источник для некоторых идей.
Он основан на Facebook React и SwarmJS и предназначен в первую очередь для внедрения в приложениях поддержка расширенного ввода текста в режиме реального времени.
Насколько я знаю, это первая реализация этого метода с открытым исходным кодом. Обратите внимание, что это довольно ново, и не было реального тестирования/использования в реальном мире, поэтому есть некоторые известные ошибки и, вероятно, много неизвестных.
Отказ от ответственности. Я являюсь автором вышеупомянутого проекта.
Ответ 5
Если вы используете инспектор элементов (Инструменты > Инструменты разработчика на хром или расширение Firebug для Firefox), вы можете увидеть, какие методы они использовали для его реализации.
Как вы это реализуете, это то же самое, что и все, - разбивайте задачи на достаточно маленькие единицы, чтобы вы могли понять их, понимать, как подразделения действуют согласованно, чтобы реализовать систему, а затем реализовать единицы и объединить их.
Ответ 6
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>