Как создать персонализированный настраиваемый объект в HTML/JavaScript

Question

Я хочу создать пользовательский объект в HTML, который является настраиваемым. Как я могу это сделать вообще?

Подробнее о том, зачем я хочу: мне нужен какой-то компонент редактора с гораздо большей мощностью и контролем над ним. То есть ни один символ нельзя вводить напрямую. Это похоже на большое дерево объектов (представьте себе AST или так), и ваше внимание сосредоточено на некоторых из этих объектов. Каждый объект имеет некоторые свойства, возможно, последовательность символов, которую можно редактировать, и некоторые подобъекты. Теперь, когда вы печатаете, в зависимости от того, где находится фокус, он должен манипулировать этими объектами, т. Е. Добавлять некоторые новые вспомогательные объекты (в том месте, где находится фокус), удалять некоторые объекты или выполнять некоторые другие манипуляции. Также вставка не должна быть разрешена напрямую, она должна скорее анализировать текущее содержимое буфера обмена, а затем выполнять конкретные манипуляции. Копирование некоторого содержимого должно привести к некоторому текстовому представлению в буфере обмена.

Я мог бы пойти сейчас и как-то перекопать что-то вроде курсора фокусировки, но это имеет несколько недостатков. В основном, он игнорирует, где настоящий фокус сейчас. И я не уверен, что это упростит, если HTML может предоставить уже что-то подобное.

---

Edit: После того, как я нашел первую полезную информацию, некоторые до сих пор открытые вопросы:

• Что такое простой способ сделать некоторый фокус курсор? То есть если какой-то div имеет фокус прямо сейчас, и он содержит некоторый текст, я хочу нарисовать курсор.
• Как обращаться с копией &? (См. Выше для более подробной информации.)

Answer 1

Просто используйте входы html и обрабатывайте специальные клавиши вместе с ним. Если вы добавите атрибут tabIndex в элементы html, фокус может быть остановлен на нем (я имею в виду не только вход и текстовую область). Если вы сфокусируете эти фокусируемые объекты с помощью текстовых входов, когда вы сфокусированы, вы можете легко создать пользовательский интерфейс редактора.

В то же время window.clipboardData обертывает объект буфера обмена (простой ex: http://lab.artlung.com/copy-to-clipboard-javascript/) в других браузерах вы можете инициировать копирование/вставку ширины документа/Range.execCommand ('Copy');

Простой пример:

Copy = textHolderElement.createTextRange(); 
Copy.execCommand("Copy"); 

Answer 2

А, я нашел несколько полезную информацию here. Я думаю, что есть что-то объясняемое, мне нужно справиться с фокусом так, как я хочу.