首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在contentEditable中重新渲染后,表情符号会变成问号

是因为表情符号通常是使用特定的Unicode字符表示的,而在重新渲染过程中,可能会导致字符编码的转换或解析错误,从而无法正确显示表情符号。

为了解决这个问题,可以考虑以下几个方面:

  1. 字符编码:确保在重新渲染过程中,字符编码的转换是正确的。可以使用合适的编码方式,如UTF-8,来保证表情符号的正确显示。
  2. 字体支持:表情符号通常需要特定的字体支持才能正确显示。在重新渲染时,确保所使用的字体包含了表情符号所需的字符集。可以通过在CSS中设置合适的字体族来实现,如"Segoe UI Emoji"、"Noto Color Emoji"等。
  3. 文本处理:在重新渲染之前,对文本内容进行处理,将表情符号转换为对应的HTML实体编码。这样可以避免字符编码转换带来的问题,并确保表情符号在重新渲染后能够正确显示。
  4. 浏览器兼容性:不同的浏览器对于表情符号的支持程度可能有所差异。在开发过程中,可以针对不同的浏览器进行测试,并根据需要进行兼容性处理。

总结起来,解决在contentEditable中重新渲染后表情符号变成问号的问题,需要注意字符编码、字体支持、文本处理和浏览器兼容性等方面。具体的实现方式可以根据具体的开发环境和需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

造一个 react-contenteditable 轮子

的回答: 当时试了一下确实很好玩,于是每次都可以在妹子面前秀一波操作,在他们惊叹的目光中,我心里开心地笑了——嗯,又让一个不懂技术的人发现到了程序的美,咳咳。...style={{ height: 300 }} value={value} onChange={onChange} /> ); } 重新再认识一下 contentEditable...比如打个 "hello",会变成: 解决倒序输出的问题 如果你把 onChange 里的 setValue(e.target.value) 去掉,会发现这个 bug 又没了,又可以正常输出了。...这是因为每次 setValue 的时候组件会重新渲染,每次渲染的时候光标会跑到最前面,所以当 setValue 的时候会出现倒序输出的问题。...解决方法是在 componentDidUpdate 里把光标重新放到最后就可以了,每次渲染后光标回到最后的位置。

1.7K20

Notion 编辑器原理分析

在 notion 中没特别有 「文章」的概念,可以把任何一个 block id 组合在 url 上,notion 会把此 block id 下的所有子孙 block 又重新组合成一篇文章。...Transaction 不仅修改本地内存数据,也会提交到服务器执行,如用户操作过程中,在本地与远端数据库中都维护着一棵 block-Tree,操作在本地做完后, notion 会自动发送到服务器,服务器也要执行并更新自己的数据模型...同时被选中的 block 元素记录在 l.default.state.stores 中,并再次触发 react 重新渲染,每个组件都会通过 Block id 判断是否被选中了,当被选中则给 Block...的背景色补上,当然这里会有一个脏区处理,而不是把一整棵树都重新渲染。...这步比较简单,比如找出的区间是 ["知识",[["_"]]],需要对他加粗,加粗标识为 b,则修改后变成了["知识",[["_"],["b"]]],当然如果你再次对「知识」按下一次加次,表现是取反,变成了不加粗

2.6K30
  • 6.2 GitHub - 对项目做出贡献

    如果你使用的是电子邮件进行交流,你需要再次对代码进行修改并重新提交至邮件列表,在 GitHub 上,你只需要再次提交到你的分支中并推送即可。...在合并请求中渲染后的交叉引用 你会注意到完整的 GitHub 地址被简化了,只留下了必要的信息。...这个链接就像 Figure 6-20 中展示的那样。 ? Figure 6-20. 在合并请求中渲染后的交叉引用 除了议题编号外,你还可以通过使用提交的 SHA-1 来引用提交。...Markdown 评论中渲染后的任务列表 在合并请求中,任务列表经常被用来在合并之前展示这个分支将要完成的事情。...经过渲染后,就会变成这样: Figure 6-25 ? Figure 6-25. 渲染后的引用示例 表情符号(Emoji) 最后,我们可以在评论中使用表情符号。

    58740

    怎样让浏览器变身代码编辑器?

    Jose分享的代码如下: data:text/html, contenteditable> 只需要将上面的代码复制粘贴到浏览器的地址栏,然后按回车,就可以让浏览器变成编辑器。...这行代码告诉浏览器渲染一个HTML页面,而这个页面具备一个H5属性:contenteditable。 Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。...渲染Markdown文本 如果你习惯于用Markdown语法写作,你或许会希望直接在页面中查看渲染后的效果。...背后的原理 看了这几个例子之后,大家可能已经明白了:这些示例都是通过Data URI格式让浏览器渲染一段HTML代码。而编辑器相关的样式已经写在了代码中。...有的开发者还是不满足于上面那种手动输入代码、将浏览器变成编辑器的方法,甚至是直接将真正的编辑器搬到了浏览器中运行。这就是我们最后要介绍的SlimText,下面是具体截图。

    1K10

    富文本及编辑器的跨平台方案

    有朋友也许会问,HTML 在 Android 内可以用 HTML.fromHtml 方法解析展示富文本内容。...定义好数据模型后,此时数据在各平台间的流转过程就如下图所示: 整个流程总结下来就是:以通用数据模型作为媒介,打通 WEB 端与 Android、小程序的数据互通,在各平台用原生的组件渲染页面,最终实现富文本的跨平台...基于 contenteditable 的编辑器,在光标插入的时候,会自动唤起手机端的输入法键盘。有些场景下,比如插入图片后,预期键盘处于关闭状态。...但是在实际操作时,键盘会默认唤起,即系统键盘不受编辑器控制。...在跨平台编辑器中,重新上传需要在 WEB 编辑器中触发,交由Native APP 重新上传。Native APP上传图片的前提是拿到图片的本地路径。

    82740

    用Rust和React创建一个富文本编辑器

    一个渲染上述数据模型的状态并处理用户互动的视图。 我们在视图中使用了Slate,但结果是它也拉入了自己的数据模型。...然后,我们的Rust还原器会处理这些动作,并处理所有的边缘情况,包括确保光标不会出现在@的中间。 视图 在我们RTE的大部分开发过程中,我们的编辑器甚至不是一个编辑器。至少从浏览器的角度来看不是。...我们在最终版本中仍然使用contenteditable属性,因为我们很快会讨论一些实际的影响,但我们有意识地决定尽可能少地依赖它。这对我们最初构建RTE的方式产生了深远的影响,你将在本节中看到。...这当然会让人感到不知所措,在开发过程中,可能很难保持对哪些工作和哪些不工作的概述。而这正是我们觉得最初没有contenteditable的工作很好的原因。...杂项 上述所有内容可能会让你对编辑器的工作原理有一个较高的认识,但魔鬼是在细节中的。下面是我们需要解决的一些小问题。 支持Unicode。每个人都喜欢的标准,但在工作中却很麻烦。

    2.6K133

    前端富文本基础及实现

    如图所示: 前端中的富文本 前端富文本通过 html 的各个元素配合各种样式(一般是内联样式)实现。 例如: 富文本编辑器中的富文本,是由红色框中带有语义化标签和内联样式的 html 渲染实现的。...在空白的 HTML 文档中嵌入一个 iframe,并将 designMode 属性设置为 on,文档就会变成可编辑的,实际编辑的则是 iframe 内的 body 元素。...文档变成可编辑后,就可以像使用文字处理程序一样编辑文本。 效果如图: 元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。...使用方式是在一个元素上添加 contenteditable 属性并设置为 true,然后该元素会立即被用户编辑。...该方法执行后,会返回 boolean 值,如果是 false,表示操作不被支持或未被启用。 不同浏览器支持的命令也不一样。下方标列出了最常用的命令。

    4.6K50

    富文本及编辑器的跨平台方案

    有朋友也许会问,HTML 在 Android 内可以用 HTML.fromHtml 方法解析展示富文本内容。...定义好数据模型后,此时数据在各平台间的流转过程就如下图所示: 整个流程总结下来就是:以通用数据模型作为媒介,打通 WEB 端与 Android、小程序的数据互通,在各平台用原生的组件渲染页面,最终实现富文本的跨平台...基于 contenteditable 的编辑器,在光标插入的时候,会自动唤起手机端的输入法键盘。有些场景下,比如插入图片后,预期键盘处于关闭状态。...但是在实际操作时,键盘会默认唤起,即系统键盘不受编辑器控制。...在跨平台编辑器中,重新上传需要在 WEB 编辑器中触发,交由Native APP 重新上传。Native APP上传图片的前提是拿到图片的本地路径。

    64230

    通过嵌套解析器条件对 XSS 进行模糊测试

    解析器 什么是解析器,它们在消息中的作用是什么? 解析器是在文本中查找子字符串的应用程序。在解析消息时,他们可以找到一个子字符串并将其转换为正确的 HTML 代码。...此外,您还可以找到从文本变成图片的表情符号和表情符号、指向用户个人资料的链接以及可点击的主题标签: 输入 输出 :) :smile...它可能会影响诸如尖括号<(0x3c) 之类的字符,这些字符负责打开新的 HTML 标签和引号"(0x22)、'(0x27),它们负责 HTML 属性的开头和结尾: 输入 输出 [url]http://google.com...A 的行,并标记列表 B 中的有效负载将被插入的位置。...在此 CMS 的最后一个版本中,其中一个 BBcodes 将所有用户输入编码为 HTML 实体。当我们试图在以前的版本上重现它时,这是一个 XSS。

    1.4K50

    程序员自我欺骗的 9 个谎言

    程序员一直在寻找完美的框架,但是像彩虹的尽头那样的完美的框架永远不会出现。 因此,当开发人员创建新框架来修补旧框架的问题并一路引入新问题时,我们会一遍又一遍地看到。...有时我认为我编写的 Java 代码的一半工作是在检查指针是否为 null。 某些语言使用问号检查 null 的方法会有所帮助,但这并不能解决问题。许多现代语言试图通过完全消除 null 来测试问题。...完成几次后,你将开始希望得到一个简单的单词,表示一个 null。 计算机可以捕捉人的选择 性别选择代码问题对程序员来说是一个大雷区。...Unicode 代表所有文本编码协议 当委员会经常开会,试图确定哪些表情符号应包含在人类交流的标志符号的最终列表中。他们还会抛弃某些表情符号,从而否认某人的感受。...一种字体看起来可爱的东西,在另一种字体中可能看上去晦涩而令人不舒服。

    70230

    user-modify跟style标签可真是天生一对?

    [5531211-b71cbd48561dd566.jpg] 前来挖墙脚的是html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea...,是不是就可以在页面上直接编写样式并且自带"热更新"?...然后激动的切到页面上看效果,发现空空如也: [1240] 经过一番研究,想要在页面上编辑style元素,必须要满足以下两点: style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样...} 于是就有了以下场景: [strip] 缺点 存在的缺点很明显,我也很刻意的去避开,那就是代码无法换行,因为回车后,内容会新增div元素,破坏了原有的文本结构:...html { background-color: #fff; } 于是就有了以下场景: [strip] 细心的人又发现了,我又刻意的不输入Tap制表符,是的没错,因为按Tap键会跳焦

    57940

    深度了解Android 7.0 ,你准备好了吗?

    一、新的Notification Android N 增加了许多新的notifications API,进行了重新的设计,引入了新的风格。...由于很多应用会注册接收此广播,因此单次网络切换即会导致所有应用被唤醒并同时处理此广播。...此项优化会影响所有应用,而不仅仅是面向 Android N 的应用。 未来的 Android 版本还可能会弃用其他隐式广播以及未绑定的后台服务。...变量选择符能够呈现一些彩色或黑白的表情符号。在移动设备上,应用应呈现彩色的表情符号,而不是黑白的。但是,如果应用显示嵌入在文本中的表情符号,那应使用黑白变量。...新版针对开发者提供了大量性能增强特性,包括单一缓冲区渲染以及允许 VR 应用访问某个专属的CPU 核心。在应用中,可以享受到专为 VR 设计的平滑头部跟踪和立体声通知功能。

    2.9K10

    contenteditable跟style标签可真是天生一对

    01 开胃 使一个div可以进行内容编辑: contenteditable>点击我进行编辑 ?...,是不是就可以在页面上直接编写样式并且自带"热更新"?...经过一番研究,想要在页面上编辑style元素,必须要满足以下两点: style元素必须放在body元素内 style元素要设置display: block; 于是代码变成了这样: <style...缺点 存在的缺点很明显,我也很刻意的去避开,那就是代码无法换行,因为回车后,内容会新增div元素,破坏了原有的文本结构: ? ?...细心的人又发现了,我又刻意的不输入Tab制表符,是的没错,因为按Tab键会跳焦(失去焦点)!所以应该需要用脚本去处理,具体网上冲浪一大堆哈 ?

    1.7K21

    Markdown 语法笔记

    渲染效果如下: 这是一个链接 Markdown语法。 网址和Email地址 使用尖括号可以很方便地把URL或者email地址变成可点击的链接。...[1]: "Hobbit lifestyles" 在上述两个实例中,渲染后的输出是相同的: In a..., 然后在方括号增加替代文本,图片链接放在圆括号里,括号里的链接后可以增加一个可选的图片标题文本。 插入图片Markdown语法代码:![图片alt](图片链接 "图片title")。...Markdown 会自动识别这区块元素,避免在区块标签前后加上没有必要的 标签。...复制和粘贴表情符号 在大多数情况下,您可以简单地从Emojipedia 等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。

    4.1K10

    深度了解Android 7.0 ,你准备好了吗?

    一 新的Notification Android N 增加了许多新的notifications API,进行了重新的设计,引入了新的风格。...由于很多应用会注册接收此广播,因此单次网络切换即会导致所有应用被唤醒并同时处理此广播。...此项优化会影响所有应用,而不仅仅是面向 Android N 的应用。 未来的 Android 版本还可能会弃用其他隐式广播以及未绑定的后台服务。...变量选择符能够呈现一些彩色或黑白的表情符号。在移动设备上,应用应呈现彩色的表情符号,而不是黑白的。但是,如果应用显示嵌入在文本中的表情符号,那应使用黑白变量。...新版针对开发者提供了大量性能增强特性,包括单一缓冲区渲染以及允许 VR 应用访问某个专属的CPU 核心。在应用中,可以享受到专为 VR 设计的平滑头部跟踪和立体声通知功能。 ?

    1.5K30

    你可能不知道的7个前端冷知识,实用且有趣!

    ⚠️注意:如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行... 效果如下所示: 3 浏览器秒变编辑器 将以下代码复制粘贴到浏览器地址栏,运行后浏览器就变成了一个原始简单的编辑器,HTML5中新加的contenteditable属性,当元素指定了该属性后...data:text/html, contenteditable> 效果如下所示: 同理,在控制台执行以下代码,同样可以将整个页面变得可以编辑。...document.body.contentEditable='true'; 效果如下所示: 4 实时编写样式的输入框 利用HTML5中的contenteditable属性,巧妙的在body增加一个可编辑的...result[key] : result } 6 带有Id属性的元素,会创建全局变量 在一张HTML页面中,所有设置了ID属性的元素会在JavaScript的执行环境中创建对应的全局变量,这意味着document.getElementById

    53510

    精读《web reflow》

    借用这张经典图: 网页渲染会经历 DOM -> CSSOM -> Layout(重排 or reflow) -> Paint(重绘) -> Composite(合成),其中 Composite 在 精读...从顺序上可以看出来,重排后一定重绘,而重绘不一定触发重排。 概述 什么时候会触发 Layout(reflow) 呢?一般来说,当元素位置发生变化时就会。...但也不尽然,因为浏览器会自动合并更改,在达到某个数量或时间后,会合并为一次 reflow,而 reflow 是渲染页面的重要一步,打开浏览器就一定会至少 reflow 一次,所以我们不可能避免 reflow...contenteditable 被设置为 contenteditable 的元素内,包括将图像复制到剪贴板在内,大量操作都会导致重排。...虽然当 JavaScript 运行时,前一帧中的所有旧布局值都是已知的,但当你对布局做了修改后,前一帧所有布局值缓存都会作废,因此当下次获取值时,不得不重新触发一次 reflow。

    71710
    领券