Question

我需要一个文本编辑器，该文本编辑器可以包含标签作为HTML元素，其中将包含供以后使用的信息。我目前正在使用ReactJs 16.8.6，但是普通的Javascript也可以。

我尝试使用Codemirror的书签，但是这些书签未包含在文本区域的值中，因此无法像文本一样被删除。所见即所得的编辑器也不能完全解决问题，它不是HTML编辑器，只是纯文本，其中带有一些标签。也尝试过使用HTML5的contenteditable本机属性，但是我无法定位文本，并且实际上无法将标签包括在特定位置，因为可以在其中选择或拖动它们。

我已经将此示例作为我要实现的目标的示例，这是我要包含的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>

example of what I need

此后，该值将转换为带有括号而不是元素的单个字符串：图片中的“变量名称”将变为{{variable.id}}。

将有一个可拖动的“变量”标签列表，并且还会通过单击退格键将其从文本中全部删除。

我也在搜索libs，但是找不到可以解决问题的任何东西。

文本编辑器内部带有可拖动的HTML元素

0 个答案: