在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) //因为我封装的一个组件，所以将值传递过去

}

前端项目emoji表情包的使用相关推荐

前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以发送表情,还得在web端.微信H5.app端.微信公众号里均可以正常显 ...
markdown中快速插入Emoji表情包语法速查表！！！
markdown中快速插入Emoji表情包语法速查表!!!
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
Emoji-Chat emoji表情包发送及显示兼容web端、移动端
Emoji-Chat emoji表情包发送及显示兼容web端.移动端序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以 ...
js文本内去除emoji表情包
利用正则匹配emoji表情包并且去除 let Arr=['emoji
java过滤ios表情,JS前端去掉emoji表情和Java后台处理emoji表情方法
莫非定律 : 任何事情都没表面看去来那么简单! emoji表情在项目中使用,因为其特殊的编码格式,经常导致在网络传输.编解码.以及数据入库中带来一些问题! 下面简单介绍使用Js和java处理移除emo ...
vue 使用emoji表情包
1.前端页面 vue <template><div class="test"><div v-show="show" :class= ...
JS前端去掉emoji表情和Java后台处理emoji表情方法
莫非定律 : 任何事情都没表面看去来那么简单! emoji表情在项目中使用,因为其特殊的编码格式,经常导致在网络传输.编解码.以及数据入库中带来一些问题! 下面简单介绍使用Js和java处理移除emo ...
linux版微信能发表情包的,仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
php文本框添加表情,仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...

前端项目emoji表情包的使用

1、node-emoji

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

前端项目emoji表情包的使用相关推荐

最新文章

热门文章