Nuxt中使用富文本编辑器
1.首先安装vue-quill-editor
npm install vue-quill-editor --save
npm install quill --save //安装依赖
2.在根目录的plugs目录下新建vue-quill-editor.js,写入以下内容
import Vuefrom 'vue'
import VueQuillEditorfrom 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
3.打开nuxt.config.js中引用vue-quill-editor.js以及vue-quill-editor的css样式 ，完成插件的引用
css: [
'quill/dist/quill.snow.css',
'quill/dist/quill.bubble.css',
'quill/dist/quill.core.css',
],
plugins: [
{src:'@/plugins/vue-quill-editor', ssr:false },
],
4.在你想使用富文本编辑器的页面中写入以下内容，有些功能想使用就可以把注释去掉，官网入口
<template xmlns:v-quill='富文本编辑器'>
<div class="container">
<div class="quill-editor"
:content="content"
@change="onEditorChange($event)"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
v-quill:myQuillEditor="editorOption">
export default {
data () {
return {
content:'<p>I am Example</p>',
editorOption: {
// some quill options
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
// ["blockquote", "code-block"], // 引用 代码块
[{header:1 }, {header:2 }], // 1、2 级标题
// [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
// [{ script: "sub" }, { script: "super" }], // 上标/下标
// [{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
// [{ size: ["small", false, "large", "huge"] }], // 字体大小
// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
// [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: [] }], // 字体种类
// [{ align: [] }], // 对齐方式
// ["clean"], // 清除文本格式
["link", "image", "video"]// 链接、图片、视频
]
}
}
}
},
mounted() {
console.log('app init, my quill insrance object is:', this.myQuillEditor)
setTimeout(() => {
this.content ='i am changed'
}, 3000)
},
methods: {
onEditorBlur(editor) {
//失去焦点事件
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
//获得焦点事件
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({ editor, html, text }) {
//内容改变事件
console.log('editor change!', editor, html, text)
this.content = html
}
}
}
<style scoped>
.container {
width:100%;
max-width:700px;
margin:0 auto;
padding:30px 0;
}
.quill-editor {
min-height:200px;
overflow-y:auto;
}
