javascript - 使用媒体编辑器在页面加载时显示可编辑字段

Question

我正在使用 medium-editor js 来编辑可编辑字段。当我将鼠标悬停在相应字段上时，它会显示要编辑的字段。

但是，我希望它在页面加载时显示可编辑字段，而不是将鼠标悬停在包含可编辑字段的 div 上。

在初始化 MediumEditor 类时是否可以传递选项或以任何其他方式在页面加载时显示所有可编辑字段？

我的代码如下所示

 var editor = new MediumEditor(el, {
            placeholder: false,
            toolbar: false
        })

        editor.subscribe('editableInput', function (event, currentEditable) {
// Code for editable Fields
}

Answer 1

如果您通过直接传递元素(示例代码中的 el 变量)来实例化 MediumEditor，那么您不能为传递到编辑器中的每个元素添加自定义 css 类吗？我不确定示例代码中的 el 来自哪里，但您可以执行以下操作:

var els = document.querySelectorAll('.editable');
var editor1 = new MediumEditor(els, {
  placeholder: false,
  toolbar: false
});

.editable {
  border: 3px solid #00ff00;
}

<script src="http://cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link href="http://cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" rel="stylesheet" />


<div class="editable">Editor Field 1</div>
<div>Non-Editable Field</div>
<div class="editable">Editor Field 2</div>

这样做的结果是每个编辑器字段都有一个“可编辑”类，并且我通过 css 使用边框设置了这些字段的样式。

这就是你所要求的吗？