Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
2024-10-21 03:19:52
1、安装
npm install vue-quill-editor --save
2、使用
import { quillEditor } from 'vue-quill-editor'
3、组件中
<quill-editor v-model="content"
ref="myQuillEditor"
class="editer"
:options="editorOption"
@ready="onEditorReady($event)">
</quill-editor>
data(){
return {
content: '<h3>文本编辑</h3>',
editorOption: { }
}
},
components: {
NavHeader,
quillEditor,
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
}
},
methods: {
onEditorReady(editor) {
console.log('editor ready!', editor)
},
submit(){
console.log(this.content);
this.$message.success('提交成功!');
}
}
这样就已经完成了,但是有的时候在页面中 这样之后,样式会全部乱掉解决办法
main.js 中
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor' Vue.use(VueQuillEditor);
最新文章
- 【腾讯优测干货分享】Android内存泄漏的简单检查与分析方法
- MyEclipse8.5可用注册码(到2018年)
- QT程序在windows下部署发布
- cf B Bear and Strings
- 3D游戏引擎一 win32编程
- codeforces #286 Div.2 C DP总是以意外的方式打败我
- 纯CSS修改checkbox复选框样式
- Xilinx Vivado的使用详细介绍(3):使用IP核
- 过滤器(Filter)与拦截器(Interceptor )区别
- PATH_SEPARATOR
- centos7下kubernetes(5。部署kubernetes dashboard)
- LR 两种html与url录制
- js运用4
- USB3.0及NVME SSD安装WIN7X64
- fortran77读写文本文档
- HDOJ4548_美素数
- Libevent源码分析—event_add()
- mysql索引 B+tree
- ios中自定义图层的2种方法
- SM2椭圆曲线公钥密码算法