详解Vue基于vue-quill-editor富文本编辑器使用心得

npm install vue-quill-editor

npm install quill

2

3

4

5

6

7

import Vue from ‘vue‘

import VueQuillEditor from ‘vue-quill-editor‘

import ‘quill/dist/quill.core.css‘

import ‘quill/dist/quill.snow.css‘

import ‘quill/dist/quill.bubble.css‘

Vue.use(VueQuillEditor)

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<template>

 <div class="edit_container">

  <quill-editor

   v-model="content"

   ref="myQuillEditor"

   :options="editorOption"

   @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

   @change="onEditorChange($event)">

  </quill-editor>

  <button v-on:click="saveHtml">保存</button>

 </div>

</template>

<script>

export default {

 name: ‘App‘,

 data(){

  return {

   content: `<p>hello world</p>`,

   editorOption: {}

  }

 },computed: {

  editor() {

   return this.$refs.myQuillEditor.quill;

  },

 },methods: {

  onEditorReady(editor) { // 准备编辑器

  },

  onEditorBlur(){}, // 失去焦点事件

  onEditorFocus(){}, // 获得焦点事件

  onEditorChange(){}, // 内容改变事件

  saveHtml:function(event){

   alert(this.content);

  }

 }

}

</script>

<style>

#app {

 font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

</style>

2

3

4

onEditorFocus(val,editor){ // 富文本获得焦点时的事件

  console.log(val); // 富文本获得焦点时的内容

  editor.enable(false); // 在获取焦点的时候禁用

 }

2

3

4

5

6

7

8

data(){

  return {

   content: `<p>hello world</p>`,

   editorOption: {

    theme:‘snow‘

   }

  }

 }

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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‘], //清除字体样式

    [‘image‘,‘video‘] //上传图片、上传视频

   ]

   },

   theme:‘snow‘

  }

  }

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

import { quillEditor } from ‘vue-quill-editor‘

import * as Quill from ‘quill‘ //引入编辑器

import { ImageDrop } from ‘quill-image-drop-module‘;

Quill.register(‘modules/imageDrop‘, ImageDrop);

export default {

 name: ‘App‘,

 data(){

  return{

  editorOption:{

   modules:{

   imageDrop:true,

   },

   theme:‘snow‘

  }

  }

 }

2

3

4

5

6

7

8

return{

  editorOption:{

   modules:{

　　　　　　　　imageResize: {}

   },

   theme:‘snow‘

  }

  }