前端项目emoji表情包的使用

一、引入

import { quillEditor, Quill } from 'vue-quill-editor'

import 'quill/dist/quill.core.css';

import 'quill/dist/quill.snow.css';

import 'quill/dist/quill.bubble.css';

import quillEmoji from 'quill-emoji'

import "quill-emoji/dist/quill-emoji.css";

二、注册emoji

Quill.register('modules/quillEmoji', quillEmoji)//将emoji插件注册进富文本

vue-quill-editor可以手动配置它的功能项

三、配置富文本的功能，不配置默认也有一些效果，在return里定义就可以了

editorOption: {//配置

                modules: {

                    "emoji-toolbar": true,

                    "emoji-textarea": true,

                    "emoji-shortname": true,

                    toolbar: {

                        container: [  //功能项

                            ['bold', 'italic', 'underline'],//加粗，切斜，下划线

                            ['blockquote', 'code-block'],

                            [{ 'header': 1 }, { 'header': 2 }],               // custom button values

                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],

                            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript

                            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent

                            [{ 'direction': 'rtl' }],                         // text direction

                            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown

                            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme

                            [{ 'font': [] }],

                            [{ 'align': [] }],

                            ['link', 'image', 'video'],

                            ['emoji'],

                            ['clean']

                        ],  // 工具栏

                        handlers: {

                            emoji: function () { },

                            'image': function (value) {

                                if (value) {

                                    document.querySelector('.uploadImage input').click()

                                } else {

                                    this.quill.format('image', false);

                                }

                            }

                        }

                    }

                }

            },

             四、注册quillEditor为组件

            components: { quillEditor },

             五、使用

        六、事件与值定义

        content是输入的值，父组件传过来即可，是一个字符串

        blur，ready，focus事件可写可不写

        onEditorChange({ quill, html, text }) {

            this.$emit('change', html) //因为我封装的一个组件，所以将值传递过去

        }