官方文档地址:https://www.npmjs.com/package/vue-quill-editor
- vue项目中,npm安装依赖
npm install vue-quill-editor --save
- 两种引用方法,全局引用和局部引用
全局引用,项目入口文件中(main.js)注册
import Vue from 'vue'
import quillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(quillEditor)
局部引用,在需调用的vue页面中声明
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. 附上局部引用代码,关于事件和参数可查阅文档,这里不一一说明
<temple>
<div>
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"
style="height:600px;">
</quill-editor>
</div>
</template>
<script>
export default {
data(){
return{
content: '',
editorOption: {
placeholder: '编辑文章内容'
},
}
},
methods:{
onEditorChange({ editor, html, text }) {
this.content = html;
},
}
}
</script>
3 条评论
不错不错,我喜欢看 www.jiwenlaw.com
看的我热血沸腾啊https://www.ea55.com/
看的我热血沸腾啊