富文本编辑器 braft-editor在不同浏览器下粘贴格式不一致解决方案

最新推荐文章于 2024-11-21 11:58:57 发布
最新推荐文章于 2024-11-21 11:58:57 发布
阅读量1.5k 收藏 1
点赞数 4
分类专栏： 前端 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Spring163_X/article/details/111241905
版权

富文本编辑器 braft-editor在不同浏览器下粘贴格式不一致解决方案

谷歌浏览器下

谷歌翻译

在这里插入图片描述
将翻译内容复制粘贴至富文本编辑器,测试地址: https://braft.margox.cn/demos/basic
在这里插入图片描述

火狐浏览器下

谷歌翻译

在这里插入图片描述
复制粘贴内容到富文本编辑器,神奇的事情发生了
在这里插入图片描述

对比两个浏览器下输出值

1.火狐浏览器下的粘贴过来的内容

// 输出内容
<p>business numberNumber of free mailboxes/yearPlatform charge timeMail charge management</p>

2.谷歌浏览下粘贴过来的内容

// 输出内容
<p>business number</p><p>Number of free mailboxes/year
最低0.47元/天 解锁文章
【react】braft-editor 富文本字数限制失效。复制粘贴可以。但是纯打字就失效。
白日探险家的博客
01-23 871
自带的属性在140字之后就输入不了了。而我们写的这个会提示但是不会输入不了。至于具体需求还是得根据产品设计的来做。复制粘贴braft-editor富文本插件的属性可以限制字数。可是一旦纯打字限制字数就失效了。注意：我们手动封装的字数其实还有标签。首先我们要把标签过滤掉，然后再判断他的长度。所以我们在函数中用正则过滤掉了。这样就完美解决该问题。
实现浏览器复制文本原始样式到wps或office
hello.reader
03-26 1469
本需求是笔者在协助公司前端工程师的一个需求完成的，需求是在Web页面中复制带有样式的文本并期望在WPS或其他富文本编辑器中保持样式，通常需要使用HTML格式进行复制。大多数现代富文本编辑器，包括WPS，都支持从HTML格式的剪切板内容中粘贴并保留样式。其实我们可以发现，编程的变化，包括世界一切事物的发展都是基于基础构建而成。往往是人们把它搞得高深莫测，反而是复杂了事物得发展。希望大家在编程中或者生活其他方面都把一切事物简单化。思考的模式要像太阳一样。我们学习和事物本质的发展，我们可以采用哲学的思考方式。
CSND中更改文本格式 ...
weixin_30492601的博客
06-16 136
1. 字体颜色和大小 <font size = 5 color = red> 1. 字体颜色和大小</font> 其中color的值还可以是HTML颜色代码 <font size = 4 color = #0000cd> #0000cd</font> #0000cd #000000 #3366cc #0033cc ...
百度UEDITOR编辑器可以如何直接复制WORD的图文内容到编辑器中?
最新发布
weixin_52050572的博客
11-21 1195
编辑器：百度ueditor前端：vue2,vue3,vue-cli,html5需求：复制粘贴word内容图片，word图片转存交互,导入pdf,导入PowerPoint(PPT)要求：开源，免费，技术支持用户体验：Ctrl+V快捷键操作今天早上又有网友加我微信私聊，说是想了解一下这块的技术和方案。实际我的微信号之前就已经在网上公开了，但是很多网友还是说找不到，这个可真有点难度了。
ueditor百度富文本编辑器粘贴后html丢失class和style样式
snow_love_xia的博客
09-14 1747
ueditor富文本编辑器粘贴内容后html丢失class、style样式
React富文本框插件 —— braft-editor富文本编辑器使用简介与项目实战
h33413398的博客
12-04 5169
前言 —— 由于公司react项目中需要一个富文本框，所以这几天特意在网上找了一个react可以用的富文本框插件，该插件还是比较实用的功能比较多，使用起来也比较简单 插件名：braft-editor富文本编辑器 安装： 使用npm安装 npm install braft-editor --save 使用yarn安装 yarn add braft-editor 示例代码： import React from 'react' // 引入编辑器组件 import BraftEditor from 'braft-e
Braft Editor: React富文本编辑器的特性与最新更新
- **基于Web**：意味着braft-editor是一个基于Web技术栈开发的富文本编辑器，可以在任何支持Web技术的浏览器上运行，无需额外插件或软件。 - **兼容主流现代浏览器**：说明braft-editor能够在市面上常见的浏览器上...
Braft Editor 回填问题，鼠标错位
u014651093的专栏
05-24 583
回填后输入1234 变成4321。
设置csdn文章的字体样式/格式
Mic_Mickey的博客
04-26 378
感谢????https://blog.youkuaiyun.com/qq_43232869/article/details/108013915 想要这样的样式???? `used to copy`
微信135富文本编辑器编辑的样式与页面无法兼容的问题
grapemlin-某厂螺丝钉
08-29 3304
解决办法： html头部<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>改为<!DOCTYPE html
使用braft-editor踩坑记录
weixin_44952328的博客
11-29 3475
后续需求有变动，需要添加额外的上传按钮，可以上传图片和office文档， 发现之前简单的复制粘贴图片的方式满足不了新的需求。之后发现braft-editor官网中提到可以结合antd组件来做一系列的操作，所以毋庸置疑的选择了和Upload结合使用方式。allowPasteImage: true, // 是否允许直接粘贴剪贴板图片到编辑器。判断文件是图片还是其他格式，图片就转成IMAGE，其他文件，转成LINK。上传图片开始使用的media属性，能直接粘贴截图，很方便。(可上传图片、文档格式)
前端富文本设置的表格样式无法展示解决方案
ITKouSyou的博客
12-15 3462
这是因为，大部分编辑器本身会自带一些样式属性，而当获取富文本内容的时候往往是不带这些样式属性的，所以才导致了实际看到的和编辑器里预览的不一致的问题。这里的样式可以自己根据实际需求进行修改，如果想要和编辑器完全一致的样式，推荐通过浏览器的开发者工具，查看富文本编辑器里使用的哪种样式，然后进行对应的样式增加。后面的追加样式同方案一一致，但是因为时标签样式，所以会造成样式污染，此方法用在单页面展示富文本会相对方便。然后点击此按键，然后选中左边的表格区域，选中后，就可以在Styles里看到对应的样式。
记BraftEditor的使用
weixin_39444480的博客
07-03 3229
braftEditor的使用
Braft Editor 使用与配置指南
gitblog_00585的博客
08-16 705
Braft Editor 使用与配置指南 项目地址:https://gitcode.com/gh_mirrors/br/braft-editor 项目目录结构及介绍 Braft Editor 是一个基于 React 构建的富文本编辑器，其项目结构体现了高度模块化和清晰的层次划分，便于开发者理解和定制。以下是对核心部分的简要解析： . ├── dist # 编译...
braft-editor富文本编辑器的使用
热门推荐
Lily_miao的博客
01-29 1万+
1.在线演示： http://margox.github.io/braft-editor/ 2.安装：yarn add braft-editor或npm install braft-editor --save 3.使用： 编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器： import React ...
braft-edit 富文本编辑器
weixin_45954775的博客
11-18 2631
需求：一个自定义插入文本的富文本编辑器 优点：可以自定义control 注：编辑器自身不带有上传功能，具体的上传功能需要通过uploadFn指定。media.uploadFn 一些官方文档： 中文的：https://www.yuque.com/braft-editor/be/mrgy92 braft-util源码：https://github.com/margox/braft-utils （里面没有readme） braft-edit：https://www.npmjs.com/pa..
基于React的富文本编辑器——Braft Editor使用
z止于至善的博客
09-26 6709
antd是基于 Ant Design 设计规范实现的 高质量 React 组件库，倾向于只提供符合该规范且带有视觉展现的 UI 组件，也尽量不重复造轮子。如果要在React项目中使用富文本编辑器，官方推荐使用与。这篇文章主要介绍与Antd的结合使用。
【antd】braft-editor，出现样式没有加载问题
rtxiaoying的博客
03-23 549
项目中集成braft-editor，出现下面的问题 但是比较了代码发现没有什么问题，怀疑是浏览器的兼容性问题，在最新的chrome中运行也是一样的， 分析是样式没有加载，去github的braft-editor的issue中也没有找到解决办法 看到官网中的集成代码第一句好像我没写，果断些写上，立刻好使了。 import 'braft-editor/dist/index.css' ...
React 中使用 braft-editor 踩坑记，引用 braft-utils 有错误
超逸の学习技术博客
10-15 2952
最近接到一个需求，需要支持在文本输入框支持图片粘贴上传，但是在我们这边管理页面，对于用户提的一些问题显示又不支持 Matkdown。 所以选择 braft-editor 来实现，发现提供一些配置项，因为我这边不需要那些加粗，下划线等等按钮，只需要上传图片，粘贴然后配合 COS 存链接就好了。 遇到的问题 首先我这个是 React 项目，其它项目不太清楚，然后使用 yarn。 在 utils 官方仓库中，有相关 issues，链接在下方： 引用 braft-utils 有错误 #500 其中也有人提及了一些解
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值