前端项目emoji表情包的使用

最新推荐文章于 2024-05-25 09:55:56 发布

小阿昌～

最新推荐文章于 2024-05-25 09:55:56 发布

阅读量5.7k

点赞数 4

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/qq_40557366/article/details/120077406

版权

本文介绍了如何在Vue项目中使用emoji，包括通过node-emoji直接在模板中展示表情，以及结合vue-quill-editor和quill-emoji实现富文本编辑器中的emoji功能。详细步骤包括安装、注册模块、配置富文本编辑器选项以及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目使用emoji，像node-emoji插件和quill-emoji里的都很不错。

1、node-emoji

1. yarn add node-emoji 或 npm i node-emoji

2. 在main.js将它挂载到vue原型上

import emoji from 'node-emoji'

Vue.prototype.emoji = emoji. //这里，emoji里的表情还是很多的好像有上千个，这里可以截取其中的一部分。然后在组件中就可以使用了。

<div class="d" v-for="(item,index) in emoji" :key="index">
    {{item}}
</div>

二、quill-emoji配合vue-quill-editor

1.yarn add vue-quill-editor yarn add quill-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 },

五、使用



<quill-editor id="editor" class="uploadImage" @change="onEditorChange($event)" :content="content" :style="`height:${height}`" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"

            @ready="onEditorReady($event)">

        </quill-editor>

六、事件与值定义

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

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

        onEditorChange({ quill, html, text }) {

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

        }