Vue-Quill-Editor:基于Quill、适用于Vue2的富文本编辑器。
1.首先安装依赖包
npm install vue-quill-editor --save
2.引入样式(这里是组件引入,非全局引入)
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
components: {
quillEditor
},
}
3.使用 quill-editor 组件
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
<el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
4.editorOption 为配置项:
export default {
data(){
return {
content: '',
editorOption: {
placeholder: 'Hello World'
}
}
},
methods: {
onEditorChange({ editor, html, text }) {
this.content = html;
},
submit(){
console.log(this.content);
this.$message.success('提交成功!');
}
}
}
富文本编辑器:vue-quill-editor