使用中型编辑器在页面加载时显示可编辑字段答案

【问题标题】：Show Editable fields on page load using medium-editor使用中型编辑器在页面加载时显示可编辑字段
【发布时间】：2017-02-11 10:26:48
【问题描述】：

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

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

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

我的代码是这样的

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

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

【问题讨论】：

标签： javascript ruby-on-rails vue.js medium-editor

【解决方案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 为这些字段设置了边框。

这是你要求的吗？

【讨论】：