WHAT - 富文本编辑器系列(二)- 表情包面板

目录

  • 一、背景
  • 二、实践
    • 1. 安装 Tiptap
    • 2. 创建表情包面板组件
    • 3. 在 Tiptap 编辑器中集成表情包面板
    • 4. 样式调整
    • 5. 完整示例代码
  • 三、自定义格式编码的表情
    • 1. 数据压缩和传输效率
    • 2. 兼容性和一致性
    • 3. 安全性和防篡改
    • 4. 特定功能需求
    • 5. 集成现有系统
    • 6. 示例

一、背景

在一个富文本编辑器中实现表情包面板和选择功能需要以下几个步骤:

  1. 添加表情包按钮:在编辑器的工具栏中添加一个按钮,点击该按钮可以打开表情包面板。
  2. 创建表情包面板:设计一个表情包面板,包含多个表情图片,用户可以点击选择表情。
  3. 插入表情到编辑器:用户选择表情后,将表情插入到编辑器的内容中。

二、实践

我们将以 Tiptap 为例来实现这个功能,Tiptap 是一个基于 ProseMirror 构建的 Vue.js 富文本编辑器。

1. 安装 Tiptap

首先,确保已经安装了 Tiptap 和相关依赖:

npm install @tiptap/vue-3 @tiptap/starter-kit

2. 创建表情包面板组件

我们创建一个简单的表情包面板组件,可以在用户点击表情包按钮时展示出来。

// src/components/EmojiPicker.vue<template><div class="emoji-picker" v-if="visible"><imgv-for="emoji in emojis":key="emoji":src="emoji"@click="selectEmoji(emoji)"class="emoji"/></div>
</template><script>
export default {props: {visible: {type: Boolean,default: false,},},data() {return {emojis: ['https://example.com/emoji1.png','https://example.com/emoji2.png','https://example.com/emoji3.png',// 添加更多的表情图片URL],};},methods: {selectEmoji(emoji) {this.$emit('select', emoji);},},
};
</script><style scoped>
.emoji-picker {display: flex;flex-wrap: wrap;border: 1px solid #ccc;background: #fff;padding: 10px;
}
.emoji {width: 32px;height: 32px;cursor: pointer;margin: 5px;
}
</style>

3. 在 Tiptap 编辑器中集成表情包面板

接下来,在 Tiptap 编辑器组件中集成表情包面板。

// src/components/TiptapEditor.vue<template><div><button @click="toggleEmojiPicker">😀</button><emoji-picker :visible="emojiPickerVisible" @select="insertEmoji" /><editor-content :editor="editor" /></div>
</template><script>
import { EditorContent, useEditor } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import EmojiPicker from './EmojiPicker.vue';export default {components: {EditorContent,EmojiPicker,},data() {return {emojiPickerVisible: false,};},setup() {const editor = useEditor({extensions: [StarterKit],content: '<p>Hello World!</p>',});return {editor,};},methods: {toggleEmojiPicker() {this.emojiPickerVisible = !this.emojiPickerVisible;},insertEmoji(emoji) {this.editor.commands.insertContent(`<img src="${emoji}" alt="emoji" />`);this.emojiPickerVisible = false;},},beforeUnmount() {this.editor.destroy();},
};
</script><style>
/* 添加一些样式 */
</style>

4. 样式调整

可以根据需要调整样式,使得表情包面板和按钮更符合你的应用需求。

/* 样式调整示例 */
button {font-size: 20px;cursor: pointer;
}

5. 完整示例代码

EmojiPicker.vue

<template><div class="emoji-picker" v-if="visible"><imgv-for="emoji in emojis":key="emoji":src="emoji"@click="selectEmoji(emoji)"class="emoji"/></div>
</template><script>
export default {props: {visible: {type: Boolean,default: false,},},data() {return {emojis: ['https://example.com/emoji1.png','https://example.com/emoji2.png','https://example.com/emoji3.png',// 添加更多的表情图片URL],};},methods: {selectEmoji(emoji) {this.$emit('select', emoji);},},
};
</script><style scoped>
.emoji-picker {display: flex;flex-wrap: wrap;border: 1px solid #ccc;background: #fff;padding: 10px;
}
.emoji {width: 32px;height: 32px;cursor: pointer;margin: 5px;
}
</style>

TiptapEditor.vue

<template><div><button @click="toggleEmojiPicker">😀</button><emoji-picker :visible="emojiPickerVisible" @select="insertEmoji" /><editor-content :editor="editor" /></div>
</template><script>
import { EditorContent, useEditor } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';
import EmojiPicker from './EmojiPicker.vue';export default {components: {EditorContent,EmojiPicker,},data() {return {emojiPickerVisible: false,};},setup() {const editor = useEditor({extensions: [StarterKit],content: '<p>Hello World!</p>',});return {editor,};},methods: {toggleEmojiPicker() {this.emojiPickerVisible = !this.emojiPickerVisible;},insertEmoji(emoji) {this.editor.commands.insertContent(`<img src="${emoji}" alt="emoji" />`);this.emojiPickerVisible = false;},},beforeUnmount() {this.editor.destroy();},
};
</script><style>
/* 添加一些样式 */
button {font-size: 20px;cursor: pointer;
}
</style>

这样,你就可以在 Tiptap 编辑器中实现表情包面板和选择功能了。用户点击表情包按钮时,可以选择表情并插入到编辑器中。

三、自定义格式编码的表情

前面示例中,我们用 url 的形式存储表情包数据。但有时候我们也会遇到通过一些特殊的自定义格式编码来表示一个表情,使用自定义格式编码的表情数据的原因通常是为了满足特定需求或限制,或者是为了实现某些特定功能。

以下是一些常见的原因和场景:

1. 数据压缩和传输效率

自定义编码格式有时比标准格式(如 Base64)更紧凑,可以减少数据传输的大小,提高传输效率。这在需要通过网络传输大量表情数据的应用中尤其重要。

2. 兼容性和一致性

在一些应用场景中,可能需要确保所有平台和设备上的表情显示一致。使用自定义编码格式可以确保表情数据在不同的操作系统和浏览器中得到一致的呈现。

3. 安全性和防篡改

自定义编码格式可以用于增加数据的安全性和防篡改能力。例如,某些格式可能包含校验码或加密信息,以防止表情数据被恶意修改或篡改。

4. 特定功能需求

某些应用可能需要在表情数据中嵌入额外的信息,如动画帧、交互信息或元数据。自定义格式可以灵活地添加这些信息,而标准格式可能无法满足这些需求。

5. 集成现有系统

如果一个应用或平台已经有现成的自定义表情数据格式,为了与现有系统兼容,可能需要继续使用这种格式。

6. 示例

示例:自定义编码格式

假设我们有一个自定义的表情数据格式,它包含了表情的 ID 和一些元数据。我们可以用 JSON 来表示:

[{"id": "emoji1","src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...","description": "Happy face"},{"id": "emoji2","src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...","description": "Sad face"}
]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/850381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

day38 ● 理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

509. 斐波那契数 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0c;其中 …

Unity 编辑器扩展,获取目录下所有的预制件

先看演示效果 实现方案 1创建几个用于测试的cube 2&#xff0c;创建一个Editor脚本 3&#xff0c;编写脚本内容 附上源码 using UnityEditor; using UnityEngine;public class GetPrefeb : EditorWindow {private string folderPath "Assets/Resources"; // 指定预…

[FSCTF 2023]Tea_apk

得到密文和密钥 import base64 from ctypes import c_uint32import libnumDELTA 0x9E3779B9def decrypt(v, n, k):rounds 6 int(52 / n)sum c_uint32(rounds * DELTA)y v[0].valuewhile rounds > 0:e (sum.value >> 2) & 3p n - 1while p > 0:z v[p …

matlab仿真教程要点和难点以及实际应用

Matlab仿真基础教程 1. 确定问题和目标 概述:明确你要解决的问题和仿真的目标。 参考:无直接参考数字,但这是仿真流程的第一步(参考文章3)。 2. 建立数学模型 概述:根据问题和目标,建立相应的数学模型。 参考:无直接参考数字,但数学模型是仿真的基础(参考文章3)…

Django 连接mysql数据库配置

1&#xff0c;提前创建注册的app1应用 Test/Test/settings.py python manage.py startapp app1 2&#xff0c;配置mysql数据库连接 Test/Test/settings.py DATABASES {default: {ENGINE: django.db.backends.mysql,# 数据库名字NAME: db1,# 连接mysql数据库用户名USER: ro…

Python 基于阿里云的OSS对象存储服务实现本地文件上云框架

Python 基于阿里云的OSS对象存储服务实现将文件上云框架 文章目录 Python 基于阿里云的OSS对象存储服务实现将文件上云框架一、前言二、阿里云配置1、获取用户AKEY和AKeySecret2、创建Bucket 三、Python 阿里云oss上云框架1、安装oss2依赖库2、阿里云oss python 一、前言 未来…

2024年CKA模拟系统制作 | step-by-step | 1、基础环境准备

目录 一、软件环境 二、虚拟网络环境准备 1、编辑虚拟网络 2、网络设置 三、新建虚拟主机 1、新建目录 2、新建虚拟主机 四、系统安装 1、装载系统镜像 2、开启虚拟机 3、选择语言 4、键盘选择 5、网络配置 6、代理设置 7、设置软件源 8、存储设置 9、名称设置 …

摆脱Jenkins - 使用google cloudbuild 部署 java service 到 compute engine VM

在之前 介绍 cloud build 的文章中 初探 Google 云原生的CICD - CloudBuild 已经介绍过&#xff0c; 用cloud build 去部署1个 spring boot service 到 cloud run 是很简单的&#xff0c; 因为部署cloud run 无非就是用gcloud 去部署1个 GAR 上的docker image 到cloud run 容…

本地部署 RAGFlow

本地部署 RAGFlow 0. RAGFlow 是什么?1. 安装 wsl-ubuntu2. (可选)配置清华大学软件源3. 系统更新和安装构建工具4. 安装 Miniconda35. 安装 CUDA Toolkit6. 安装 git lfs7. 配置 Hugging Face 的缓存路径8. 配置 vm.max_map_count9. 安装 Docker Engine10. 安装 nginx11. 本地…

42【Aseprite 作图】梅花盆栽——拆解

1 花盆 是高度比较低的盆&#xff0c;只有一个下2&#xff1b;上面分两个 1 2 盆边缘颜色深&#xff0c;上面靠近外面的颜色浅&#xff0c;正面颜色稍微深一点&#xff0c;画两条竖的浅色线&#xff0c;作为装饰 2 花盆中的沙石 沙子颜色深一点&#xff0c;中间有浅一点的线…

[office] excel工作表数据分级显示 #其他#笔记

excel工作表数据分级显示 如下图1所示的工作表数据&#xff0c;我们按东区、西区、南区、北区来建立分级显示。 图1 这里先利用“创建组”命令建立分级显示。选取单元格区域A3:E5&#xff0c;单击功能区“数据”选项卡“分级显示”组中的“创建组——创建组…”命令&#xff…

【c语言】qsort函数及泛型冒泡排序的模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、qsort函数 1.回调函数 2.qsort函数 3.void* 指针 二、泛型冒泡排序的模拟实现 1.比较函数的编写 2.交换函数的编写 3.冒泡排序的编写 4…

JWT 快速入门

什么是 JWT JSON Web Token&#xff08;JWT&#xff09;是目前最流行的跨域身份验证解决方案 JSON Web Token Introduction - jwt.ioLearn about JSON Web Tokens, what are they, how they work, when and why you should use them.https://jwt.io/introduction 一、常见会…

APP单页分发源码下载安卓苹果自动识别apk描述文件免签自动安装

下载地址&#xff1a;APP单页分发源码下载安卓苹果自动识别apk描述文件免签自动安装

MySQL数据库操作基础(增删查改)

数据库操作基础(增删查改) 1.插入 1.1往数据表中插入一条数据 insert into 表名 values (值,值,值...)此处列出的这些值的数目和类型 要和表的相对应 1.2指定列插入 insert into 表名(列名) values (值);1.3一次插入多个记录 insert into 表名 values (值),(值)...一次插入…

wordpress主题导航主题v4.16.2哈哈版

1.下载授权接口源码onenav-auth-api-v2.zip &#xff0c;在宝塔新建一个网站&#xff0c;域名为 auth.iotheme.cn&#xff0c;设置wordpress伪静态&#xff0c;申请ssl证书。将上面源码解压后上传到此网站根目录。 2. 在宝塔根目录etc下 hosts 中添加 127.0.0.1 auth.iotheme.…

《Brave New Words 》1.1 抛弃瓶子

Part I: Rise of the AI Tutor 第一部分&#xff1a;AI 导师的崛起 A great teacher can teach calculus with a paper clip and literature in an empty field. Technology is just another tool, not a destination. —Unknown 一位伟大的教师可以用回形针教微积分&#xff0…

Golang | Leetcode Golang题解之第139题单词拆分

题目&#xff1a; 题解&#xff1a; func wordBreak(s string, wordDict []string) bool {wordDictSet : make(map[string]bool)for _, w : range wordDict {wordDictSet[w] true}dp : make([]bool, len(s) 1)dp[0] truefor i : 1; i < len(s); i {for j : 0; j < i;…

脖子以下是人机交互,脖子以上是人机融合智能

“脖子以下是人机交互&#xff0c;脖子以上是人机融合智能”这句话是当前人与人工智能配合技术发展的一种形象描述&#xff0c;一个是生理物理&#xff0c;一个是人脑电脑&#xff1a; 1、人机交互的重要性 脖子以下的人机交互在当前的人工智能系统中扮演着重要的角色。人机交互…

如何解决maven中snapshot相关jar无法拉取问题

Maven中的SNAPSHOT版本是指正在开发中的版本&#xff0c;这些版本可能会频繁地更新。在使用Maven构建项目时&#xff0c;有时会遇到无法拉取SNAPSHOT相关jar的问题。以下是几种常见的解决方案&#xff1a; 1. 检查Maven配置文件&#xff08;settings.xml&#xff09; 确保你的M…