富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,现在我就把它提供给大家,希望对大家有用。具体截图如下:
安装编辑器组件
具体方法:npm install vue-quill-editor --save
编写组件
首先我们在components文件夹里创建ue.vue组件,效果图如下:
在页面中使用
下面是使用代码
<el-form-item label="来源" prop="a_source">
<el-input v-model="infoForm.a_source"></el-input>
</el-form-item>
<el-form-item label="详细">
<div class="edit_container">
<quill-editor v-model="infoForm.a_content"
ref="myQuillEditor"
class="editer"
:options="editorOption" @ready="onEditorReady($event)">
</quill-editor>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确认提交</el-button>
</el-form-item>
</el-form>