vue 富文字編輯器 vue-quill-editor

落葉寄相思發表於2018-11-07
VueUI

文件地址：https://quilljs.com/docs/quickstart/

github地址:https://github.com/surmon-china/vue-quill-editor 使用方法：

#### NPM
npm install vue-quill-editor --save
#### mian.js
import Vue from 'vue'
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 } */)

### 使用 demo
<template>
  <!-- bidirectional data binding（雙向資料繫結） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
 
  <!-- Or manually control the data synchronization（或手動控制資料流） -->
  <quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>
 
<script>
 
  // you can also register quill modules in the component
  import Quill from 'quill'
  import { someModule } from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        }
      }
    },
    // manually control the data synchronization
    // 如果需要手動控制資料同步，父元件需要顯式地處理changed事件
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>
複製程式碼

常見問題

問題一：輸入文字出現首字母的問題

刪除node_modules
刪除 package-lock.json
最後npm install
這個問題很奇怪我看很多部落格都是通過這個方式解決的，確實可以解決這個問題
複製程式碼

問題二：字型樣式丟失

解決方案： js:

import Quill from 'quill'

var Size = Quill.import('attributors/style/size');

Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '32px'];

Quill.register(Size, true);

<style>
.ql-toolbar{
  white-space: normal;
}
.ql-picker-item[data-value='10px']::before, .ql-picker-label[data-value='10px']::before {
  content: '10px' !important;
}

.ql-picker-item[data-value='12px']::before, .ql-picker-label[data-value='12px']::before {
  content: '12px' !important;
}

.ql-picker-item[data-value='14px']::before, .ql-picker-label[data-value='14px']::before {
  content: '14px' !important;
}

.ql-picker-item[data-value='16px']::before, .ql-picker-label[data-value='16px']::before {
  content: '16px' !important;
}

.ql-picker-item[data-value='18px']::before, .ql-picker-label[data-value='18px']::before {
  content: '18px' !important;
}

.ql-picker-item[data-value='20px']::before, .ql-picker-label[data-value='20px']::before {
  content: '20px' !important;
}

.ql-picker-item[data-value='24px']::before, .ql-picker-label[data-value='24px']::before {
  content: '24px' !important;
}

.ql-picker-item[data-value='30px']::before, .ql-picker-label[data-value='30px']::before {
  content: '30px' !important;
}

.ql-picker-item[data-value='32px']::before, .ql-picker-label[data-value='32px']::before {
  content: '32px' !important;
}

.ql-picker-item[data-value='36px']::before, .ql-picker-label[data-value='36px']::before {
  content: '36px' !important;
}
<style>


![](https://user-gold-cdn.xitu.io/2018/11/7/166ec4433f2db714?w=1018&h=268&f=png&s=64861)
複製程式碼

問題三：縮排indent轉為style

IndentStyle.js

var Parchment = Quill.import("parchment")
const levels = [1, 2, 3, 4, 5];
const multiplier = 2;

export default class IndentAttributor extends Parchment.Attributor.Style {
	add(node, value) {
		return super.add(node, `${value * multiplier}em`);
	}

	value(node) {
		return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN
	}
}

const IndentStyle = new IndentAttributor('indent', 'margin-left', {
	scope: Parchment.Scope.BLOCK,
	whitelist: levels.map(value => `${value * multiplier}em`)
});

Quill.register(IndentStyle);
複製程式碼
import Quill from 'quill'
import IndentStyle from './Indent.js';
...下面就正常使用就好了


![](https://user-gold-cdn.xitu.io/2018/11/7/166ec44a8a529b79?w=1208&h=246&f=png&s=97191)
複製程式碼

問題四：禁止富文字編輯

場景：比如有些時候文章需要下架，那麼下架的時候是不允許編輯的

this.$refs.myQuillEditor.quill.enable(false)
// false禁止編輯  true語序編輯
複製程式碼

相關文章