如何在中型编辑器中将类添加到当前活动段落？

Question

I'm currently using the Medium Editor JS Clone on a project where I can edit articles.

The editor is working great, I can format elements and the code it's clean but I'm trying now to find a way for add photos while editing.

A great solution would be adding a side button to the active paragraph in absolute mode, but I haven't found any way to add a class to the current active paragraph.

This is what it generates:

<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>

Here's what I want to have:

So, knowing which p inside the editor's div is the current active, will allow me to set the top position of the side button and on click append the just uploaded photo to the paragraph.

Answer 1

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

editor.getSelectedParentElement()

Answer 2

I believe for most cases just using getSelectedParentElement() should work fine, but there can be cases where calling editor.getSelectedParentElement() might not give you the top-level block container element you're looking for. There can be some types of formatting where elements can be nested inside each other (ie a <pre> within a <p> or a <p> within a <blockquote> )

There is another getTopBlockContainer(element) helper method exposed via MediumEditor.util.getTopBlockContainer(element) which will take in an element and return the top level block element container which is a direct child of the root <div> of the editor.

So, if you're looking to always get the block element that is a direct child of the root editor <div> , you can use a combination of getSelectedParentElement() and getTopBlockContainer() like this:

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