nuxt.js引用quill富文本编辑器

nuxt.js引用quill富文本编辑器

安装

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. 在pagesc创建的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>

效果图

参考文章

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1368783069/article/details/105285551
————————————————
版权声明：本文为CSDN博主「面向未来的历史」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a1368783069/article/details/105285551

这就是今日份所有的分享 如果感觉不错 希望大家给i个一键三连。
你的支持就是对我这个无名小博主最大的鼓励！ ！！