如何在Medium Editor中将类添加到当前活动段落？

Question

我目前在项目中使用Medium Editor JS Clone，我可以编辑文章。

编辑器工作得很好，我可以格式化元素和代码干净，但我现在正在尝试找到一种在编辑时添加照片的方法。

一个很好的解决方案是在绝对模式下为活动段落添加一个侧面按钮，但我没有找到任何方法将类添加到当前活动段落。

这就是它产生的结果：

<div class="editable" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="574f8260-cdfd-bf53-e5e4-3fff9da2aa19" data-placeholder="Scrivi il testo..." data-medium-focused="true">
    <p>Hello this is an editor test.</p>
    <p>This is an another paragraph.</p>
</div>

这就是我想要的：

因此，知道编辑器div中哪个p是当前活动状态，将允许我设置侧边按钮的顶部位置，然后单击将刚刚上传的照片添加到段落中。

Answer 1

您可以使用getSelectedParentElement功能

找到当前活动的元素（选择的位置）

editor.getSelectedParentElement()

Answer 2

我相信大多数情况下只使用getSelectedParentElement()应该可以正常工作，但有时候调用editor.getSelectedParentElement()可能无法为您提供您正在寻找的顶级块容器元素。可以存在某些类型的格式，其中元素可以彼此嵌套（即<pre>中的<p>或<p>中的<blockquote>

还有另一个getTopBlockContainer(element)辅助方法通过MediumEditor.util.getTopBlockContainer(element)公开，它将接收一个元素并返回顶级块元素容器，该容器是编辑器的根<div>的直接子级

因此，如果您希望始终获取作为根编辑器<div>的直接子项的块元素，则可以使用getSelectedParentElement()和getTopBlockContainer()的组合像这样：

var topBlock = MediumEditor.util.getTopBlockContainer(editor.getSelectedParentElement());