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

【问题标题】：How can I add a class to current active paragraph in Medium Editor?如何在 Medium Editor 中将类添加到当前活动段落？
【发布时间】：2017-02-10 16:55:44
【问题描述】：

我目前在一个可以编辑文章的项目中使用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 是当前活动的，我可以设置侧边按钮的顶部位置，然后单击将刚刚上传的照片附加到段落中。

【问题讨论】：

你的代码现在可以工作了吗？

标签： javascript jquery medium-editor

【解决方案1】：

您可以使用getSelectedParentElement 函数找到当前活动的元素（选择所在的位置）

editor.getSelectedParentElement()

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：