将纯文本粘贴到文本组件中,会为粘贴的文本添加 <font /> 封装器
问题
版本: 0.16.27
你能重现演示中的bug吗?
[] 是的 [X] 不
预期的行为是什么? 将粘贴文本为纯文本(文本节点),不像Grapes JS在</>元素中进行打包。
目前的行为是什么? 当我把纯文本粘贴到空文本元素时,编辑器会用<font />元素包裹它。
在粘贴文本之前 
在文本粘贴(以纯文本形式)之后 
剪贴板上的内容是纯文本,然后我粘贴成纯文本,仍然会被<字体/>元素包裹。当文本组件中已有内容时,这种情况不会发生。
文本“我是文本元素。“双击我开始输入。”其实并不在文本组件里,而是用 :empty css 规则添加的。
有人知道为什么会这样,以及我该如何解决吗?
谢谢你, 乔什
回答(4)
@artf你知道这是在组件、RTE还是其他地方发生的吗?你能指点我正确的方向吗?如果有人能帮忙,我将非常感激。谢谢!
我没法复现,但我看到你用的是自定义的“dm-text”组件,这可能是原因?!
@artf 我不这么认为。以下是 dm-text 组件类型的配置 “JavaScript” { 扩展:“文本”, 型号:{ 默认值:{ 名称:“文本”, 特征:[], 可编辑:正确, 可掉落:错误, textable:确实如此, 风格:{ 填充:“10像素”, 宽度:“100%”, 高度:“自动” }, 可造型:[ “背景色”, “页分内”, “颜色”, “文本对齐” “font-size”, “字体家族”, “字体粗细”, “线高”, “边框宽度”, “边框颜色”, “边框风格”, “填充”, “垫顶”, “右侧垫脚”, “垫底”, “左侧填充”, “边界-左上-半径”, “边界-右上-半...
谢谢你举报,@Joshmamroud。 将纯文本粘贴到文本组件中,添加<字体/>封装的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原因 在报告中包含 GrapesJS 版本、浏览器和控制台错误
相关问答
通过相似的问题讨论继续研究。
问题 #3948
每次页面重新加载后,“我的选项”(在特质中)都会被重置
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 不是在那里 描述一下那个虫子 如何复现这个漏洞?安装Grapes js并实现select组件代码将选择组件拖入编辑器点击选择组件并输入特征重新加载页面。 预期的行为是什么?输入...
问题 #4752
带有指针事件的组件:'all'(除封装器外)或可编辑组件可以拖拽并下放到自己身上。
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 107.0.5304.121(官方版本)(arm64)可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子 如何复现这...
问题 #3137
当我选择某个特定元素时,我没有看到它的样式。这个问题只发生在某些元素上。
未获得所选元素的样式 这是我的代码, const model = 编辑器。StyleManager.getModelToStyle(component); let styleObject = model.getStyle(); console.log(“样式”,styleObj...
问题 #3640
样式管理器的背景UI在Body/Wrapper上无法正常工作
在我看来,样式管理器的背景控件在处理主体与其他组件时存在一个UI错误。这个问题在#2834的截图中@kuhelbeher可以看到,但我也会提供一些简单的复现步骤。也许这个问题和那个问题有关。前往 https://grapesjs.com/demo.html删除所有现有组件,直到...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。