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

Question

我目前正在一个可以编辑文章的项目中使用 Medium Editor JS Clone。

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

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

这是它生成的内容：

<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() 可能不会为您提供您正在寻找的 top-level 块容器元素为了。可以有一些类型的格式，其中元素可以相互嵌套（即 <p> 中的 <pre> 或 <blockquote> 中的 <p>）

还有另一个 getTopBlockContainer(element) 辅助方法通过 MediumEditor.util.getTopBlockContainer(element) 公开，它将接受一个元素和 return 顶级块元素容器，它是根的直接子元素 [=编辑的 19=]。

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

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

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

How can I add a class to current active paragraph in Medium Editor?

javascript

jquery

medium-editor