vue-quill-editor 简单配置demo

项目main.js文件引入

代码语言：javascript复制

import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App,VueQuillEditor }, //组件中注册
  template: '<App/>'
})

新建一个editor-demo.vue文件，下面注释部分是局部引入方法

代码语言：javascript复制

<template>
  <div>
    <quill-editor v-model="content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)">
    </quill-editor>
    <button class="saveBtn" @click="save">保存</button>
    <pre>
      {{storageCont}}
    </pre>
    <div v-html="storageCont"></div>

  </div>
</template>

<script>

  // 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 {
    name: "editor-demo",
    // components: {
    //   quillEditor
    // },
    data() {
      return {
        content: '<h2>I am Example</h2>',
        storageCont:'',
        editorOption: {
          // some quill options
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{ 'header': 1 }, { 'header': 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] }],
              [{ 'font': [] }],
              [{ 'color': [] }, { 'background': [] }],
              [{ 'align': [] }],
              ['clean'],
              ['link', 'image', 'video'],
              ['table']
            ],
          }

        }
      }
    },
    methods: {
      save(){
        this.storageCont = JSON.parse(JSON.stringify(this.content))
      },
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
        console.log(this.content)
      },
    },
    // computed: {
    //   editor() {
    //     return this.$refs.myQuillEditor.quill
    //   }
    // },
    // mounted() {
    //   console.log('this is current quill instance object', this.editor)
    // }
  }
</script>

<style scoped>
.saveBtn{
  float: right;
  margin-top: 15px;
  border: 1px solid #409EFF;
  padding: 8px 20px;
  color: #fff;
  background-color: #409EFF;
}
  pre{
    margin-top: 90px;
    display: block;
    padding: 10px;
    color: #839496;
    font-size: 14px;
    border: 1px solid #ccc;
    white-space: pre-wrap;
    background: #002b36;
    font-family: Menlo,Monaco,Consolas,"Lucida Console","Courier New",monospace;
    font-size: 1em;
  }
</style>

editor

0 人点赞