Текстовый редактор с перетаскиваемыми элементами HTML внутри - PullRequest
0 голосов
/ 16 апреля 2019

Мне нужен текстовый редактор, который может включать теги в качестве элементов HTML, которые будут содержать информацию для последующего использования. В настоящее время я работаю с ReactJ 16.8.6, но простой Javascript также поможет.

Я пытался использовать закладки Codemirror, но они не включены в значение текстовой области и не могут быть удалены, как если бы они были текстовыми. Редакторы WYSIWYG также не совсем решили проблему, это не редактор HTML, а простой текст с некоторыми тегами внутри. Также пытался использовать нативный атрибут contenteditable HTML5, но у меня возникли проблемы с позиционированием текста и включением тегов в определенную позицию, поскольку их можно выделить или перетащить внутрь.

Я построил это как пример того, чего я пытаюсь достичь, это HTML-элемент, который я хочу включить.

const CodeMarker = props => (
  <span contentEditable={false} className="d-inline-block">
    <div className="text-bookmark">{props.label}</div>
  </span>
);

И тег contenteditable, который я пытаюсь добавить.

<div className="content-editable" contentEditable={true}>
  Variable
  <CodeMarker label="Variable Name" />
  has reached its maximum value
</div>

пример того, что мне нужно

Впоследствии значение будет преобразовано в одну строку с скобками вместо элементов: «Имя переменной» на рисунке станет {{variable.id}}.

Будет список перетаскиваемых тегов «Переменные», и они также будут удалены целиком из текста с помощью нажатия на клавишу возврата.

Я тоже искал libs, но не смог найти ни одного, который мог бы решить проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...