Есть ли что-то лучше, чем document.execCommand?

При реализации веб-редактора форматированного текста я прочитал, что document.execCommand полезен для выполнения операций с HTML-документом (например, выделение жирным шрифтом). Тем не менее, мне нужно что-то немного лучше. В частности, мне нужно точно знать, какой текст добавляется или удаляется из innerHTML и в каком месте (как смещение в HTML-представлении всего документа).

Я рассматривал возможность использования встроенного document.execCommand вместе с наблюдателем мутаций DOM4, но execCommand не подходит для этой задачи:

  • Я не вижу способа "снять выделение жирным шрифтом"
  • сгенерированный html, кажется, варьируется от браузера к браузеру. (Я бы хотел, чтобы теги ‹ span > не ‹ b >, но последовательность важнее)
  • и нет информации о том, что он делает для обработки избыточно вложенных/смежных тегов ‹ span >.

Кроме того, использование наблюдателя за мутациями кажется немного излишним, исходя из моих потребностей.

Моя мотивация: я пытаюсь периодически передавать изменения документа на сервер без повторной передачи всего документа. Я отправляю данные в виде набора вставок и удалений в представлении HTML. Если кто-то знает способ получить эту функциональность, скажем, из CKEditor (чтобы мне не пришлось начинать с нуля), то я буду любить вас вечно.

Примечание. Выполнение сравнения текста не является вариантом из-за низкой производительности при работе с очень большими документами.

В противном случае я не совсем боюсь пытаться написать что-то, что делает это. Методы, предоставляемые объектом диапазона DOM, справятся с большим количеством тяжелой работы. Я также был бы признателен за совет относительно этой возможности.


person Brent    schedule 03.09.2012    source источник
comment
execCommand — это одна из тех вещей, которая никогда не будет работать одинаково во всех браузерах (исключительно из-за того, как она возникла), как и обработка выбора. Поэтому, если этот проект предназначен для внутренней системы, я бы рекомендовал выбрать целевой браузер и выполнить сборку для него... это значительно упростит вашу задачу. Однако, если это не вариант, тогда вам будет весело .. ;) Можете ли вы заблокировать редактирование до модификации каждой строки, а затем запустить для этого текстовый diff? а может по абзацам? я бы так и поступил, если бы это был я...   -  person Pebbl    schedule 03.09.2012
comment
Это для общедоступного сайта. Уменьшение объема diff — интересная идея, но я не уверен в этом. Я мог бы определить ближайшего общего предка границ диапазонов выбора и проверить только модификации внутри него... Однако здесь есть некоторые оговорки. Он не обрабатывает изменения, сделанные путем отмены/возврата, и может иметь документ, который не содержит тегов — просто стена простого текста, оптимизация которого не принесет пользы. Кстати, мне всегда весело. :)   -  person Brent    schedule 03.09.2012
comment
+1 за то, что всегда весело проводите время ... ах, ладно, я больше думал о том, что пользователь выбирает либо часть, либо область документа только для чтения. Затем этот регион становится доступным для редактирования. Когда они довольны, они нажимают «Сохранить», а затем вычисляется разница и записывается на сервер. Таким образом, не должно быть никаких проблем с отменой/возвратом, если вы относитесь к каждому региону почти как к «отдельному документу». Однако это во многом зависит от способностей тех, кто будет использовать систему (и ваших навыков проектирования пользовательского интерфейса). Это может быть слишком неуклюжим для пользователей, которые ожидают редактирования в стиле Word.   -  person Pebbl    schedule 03.09.2012
comment
Попался. Это может показаться... странным (даже опрометчивым, но поверьте мне). Парадигма интерфейса, над которой я работаю, даже не имеет концепции сохранения. Я бы рассказал больше, но это секрет, лол. (а в SO нет системы ПМ?)   -  person Brent    schedule 03.09.2012
comment
Вы можете проверить мой ответ здесь stackoverflow.com/a/12166267/1464696 - я описал, как мы это делаем в CKEditor, но Боюсь, что вы не сможете взять на себя какую-то часть импл. Насколько я знаю, это противоречит лицензии, если вы ее не купили, и я думаю, что это вообще невыполнимо - вам придется взять 75% ядра CKEditor для этой простой работы: P.   -  person Reinmar    schedule 04.09.2012
comment
Спасибо за эту информацию. Я медленно собирал идею о том, как это сделать, и для моих нужд я думаю, что будет лучше, если я просто начну с нуля. Учитывая, что мне также нужен строгий контроль над DOM в кроссбраузерном режиме, я думаю, что буду перехватывать и вручную делать все, кроме вырезания и вставки. Для них я буду использовать наблюдателей мутаций DOM. Я прозрачно добавлю вложенные промежутки (бинарное дерево) в отображаемый DOM, чтобы можно было быстро сравнивать мутации копирования и вставки.   -  person Brent    schedule 04.09.2012
comment
Возможный дубликат Альтернативы execCommand   -  person user    schedule 30.11.2017


Ответы (3)


Есть одна альтернатива использованию execCommand — реализация всего взаимодействия с редактором, включая мигание курсора. И это было сделано. Google делает это в документах, но есть и что-то бесплатное и с открытым исходным кодом. Cloud9 IDE http://c9.io имеет реализацию. Насколько я знаю, github уже некоторое время использует этот редактор. И вы, безусловно, можете делать что угодно под этим, потому что не задействован собственный код - как в execCommand

Репозиторий находится здесь: https://github.com/ajaxorg/cloud9 (содержит всю IDE, вам нужно будет найти код для редактора. )

Кроме того, события мутации dom устарели. Если вы можете отказаться от поддержки старых браузеров, попробуйте обозреватель мутаций. Если нет — постарайтесь вообще не обнаруживать изменения DOM и перехватывать изменения в реализации редактора. Это может быть и для новых браузеров.

person naugtur    schedule 16.09.2012
comment
Спасибо. Я посмотрю на это и посмотрю, удовлетворит ли это мои потребности. Кроме того, я имел в виду наблюдателя за мутациями, честно! Легко неправильно использовать жаргон, я думаю. ^^ - person Brent; 18.09.2012
comment
Наконец-то появилось время, чтобы просмотреть это. ACE, редактор для cloud9, не поддерживает форматированное редактирование текста. Это отличная идея, но мне придется написать рендерер. Я считаю, что лучше всего использовать браузер для рендерера и общаться с ним через DOM. - person Brent; 23.09.2012
comment
Это, конечно, проще, но требует некоторого контроля. Было бы неплохо, если бы вы разместили здесь еще один ответ, когда добьетесь успеха. - person naugtur; 23.09.2012
comment
Что ж, у меня реализована половина ядра DOM уровня 2. Я нашел простой синтаксический анализатор HTML (не нужно ничего слишком сложного, потому что HTML все равно генерируется). Реализуйте необходимые мне элементы манипуляции DOM с частями, а затем создайте редактор с перехватчиками для вставки и удаления в исходном HTML-коде. Я, вероятно, сделаю это LGPL или что-то в этом роде. - person Brent; 23.09.2012
comment
Мог бы и обновить. Я так и не решил проблему. Фактически, это убило весь мой проект. Разочаровывает, что что-то подобное должно быть таким сложным. - person Brent; 05.11.2013
comment
Вот и вся бизнес-модель CKEditor и многих других. КСТАТИ. Если вам нравится возиться с редакторами кода с помощью JS, взгляните на написание плагинов для brackets редактора. Выглядит приятно - person naugtur; 06.11.2013

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

person user    schedule 30.11.2017
comment
Трикс выглядит просто потрясающе — я интегрировал его в свой проект за 15 минут! На сегодняшний день он не поддерживает встроенные изображения или изменение размера изображений. К сожалению, мне нужны эти две функции. - person Martin Meeser; 22.01.2021

Похоже, новым стандартом будет входные события уровня 2. Мне кажется, что это будет переработанная улучшенная версия execCommand.

person Martin Meeser    schedule 21.01.2021