想在nuxt.js中使用quill富文本编辑器。按照网上常见的方法,将css, js 添加到 nuxt.config.js. 这是全局调用了quill的css,js 文件。 在每个页面的源码中,都可以看到quill 的css,js。 这是没有必要的,不是每个页面都使用了quill 编辑器。所以在此介绍局部引用quill富文本编辑器。
步骤
1 安装
npm install vue-quill-editor
2 在plugins目录下创建vue-quill-editor.js。 添加内容:
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor/dist/ssr'
Vue.use(VueQuillEditor)
3 在pages或者 components中的vue文件中使用。
如在components中添加 Editor.vue, 内容如下:
<template>
<div>
<section class="container">
<quill-editor v-if="isClient" v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<div >
<input type="button" class="publish-article" value="提交短文">
</div>
</section>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
data () {
return {
isClient: false,
content: '<p>开始你的短文书写 . . .</p><p> - - </p>',
editorOption: {
// some quill options
modules: {
// toolbar: true
toolbar: [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block']
[{ 'font': [] }],
[{ 'align': [] }],
]
}
}
}
},
mounted() {
console.log('app init, my quill insrance object is:', this.myQuillEditor)
// setTimeout(() => {
// this.content = 'i am changed'
// }, 3000)
if (process.client) {
const { quillEditor } = require('vue-quill-editor')
this.$options.components = { quillEditor }
this.isClient = true
}
},
methods: {
onEditorBlur(editor) {
// console.log('editor blur!', editor)
},
onEditorFocus(editor) {
// console.log('editor focus!', editor)
},
onEditorReady(editor) {
for(var i=0; i<20; i++)
{
this.content += "<p><br /></p>";
}
},
onEditorChange({ editor, html, text }) {
}
}
}
</script>
<style scoped>
.container {
width: 100%;
margin: 0 0 0 20px;
padding: 20px 0px;
background-color: #ffffff;
}
.title {
padding-bottom: 20px;
background-color: transparent;
}
.title-box {
height: 4rem;
padding-left: 10px;
padding-right: 10px;
width:100%;
}
.publish-article {
margin-top:20px;
background-color: #48c774;
color: #ffffff;
border-radius: 5px;
padding-top:5px;
padding-bottom:5px;
padding-left: 20px;
padding-right: 20px;
}
</style>
以上程序中,在判断 process.client 为真后才进行导入 quill 组件, 即在客户端渲染。服务端渲染是没有window, document 的,所以会报错,诸如:Document / Window not defined.
以上程序已成功运行。
参考文章:
Nuxt 报错 Document / Window not defined 亲测解决方案(vue2Editor富文本编辑器之类三方包)
https://blog.csdn.net/q95548854/article/details/105139208/