Мне нужен текстовый редактор, который может включать теги в качестве элементов 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, но не смог найти ни одного, который мог бы решить проблему.