【antd】braft-editor，出现样式没有加载问题

最新推荐文章于 2024-07-11 14:20:56 发布

转载最新推荐文章于 2024-07-11 14:20:56 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/chendongpu/article/details/117223588

文章标签：

#javascript

在项目中集成Braft-Editor遇到样式加载问题，通过添加缺失的CSS引入解决，探讨浏览器兼容性影响及常见解决方案。

项目中集成braft-editor，出现下面的问题

但是比较了代码发现没有什么问题，怀疑是浏览器的兼容性问题，在最新的chrome中运行也是一样的，

分析是样式没有加载，去github的braft-editor的issue中也没有找到解决办法

看到官网中的集成代码第一句好像我没写，果断些写上，立刻好使了。

import 'braft-editor/dist/index.css'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

baobaojilingyi

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【react】braft-editor 富文本字数限制失效。复制粘贴可以。但是纯打字就失效。

白日探险家的博客

01-23

958

自带的属性在140字之后就输入不了了。而我们写的这个会提示但是不会输入不了。至于具体需求还是得根据产品设计的来做。复制粘贴braft-editor富文本插件的属性可以限制字数。可是一旦纯打字限制字数就失效了。注意：我们手动封装的字数其实还有标签。首先我们要把标签过滤掉，然后再判断他的长度。所以我们在函数中用正则过滤掉了。这样就完美解决该问题。

史上最简单 React（reactHooks）+ Antd + braft-editor 富文本编辑器

weixin_42670455的博客

07-21

2170

这里就不再搭建 react 环境了，默认大家都有环境了一、官方文档详情文档: 点击跳转二、引入依赖包 yarn add braft-editor（推荐使用）或者 npm install --save braft-editor 三、代码 import React, {useState} from 'react' import {Button, Divider, Upload} from 'antd' import {EyeOutlined, FileImageOutlined} from '@an

参与评论您还未登录，请先登录后发表或查看评论

给braft-editor加字体样式

lgs798的博客

11-23

1279

braft-editor默认是没有样式的，而我们有时候需要添加样式只需要添加两段代码就可以实现 const extendControls = [ { key: "font-family", }, ]; const fontFamily = [ { name: "宋体", family: '"宋体",sans-

react项目打包后部分样式失效的原因

weixin_44481459的博客

06-24

3573

今天测试提了几个样式的bug,我在本地怎么都重现不了，最后连接测试服务器进行调试，发现确实存在问题，但是就有点蒙蔽，把样式和本地的进行了比对，最后发现是两个组件最外层的className命名冲突了。。。在本地开发时，不同的组件会调用自己import的样式，在项目打包后，所有的css文件进行了压缩，部署后，相同类名的样式会相互冲突，所以我们在开发的时候一定要注意，在每个组件的最外层包上一个专属的className,这样就不会出现这种问题了 ...

富文本BraftEditor引起的bug

outstanding木槿

01-04

2053

不能把富文本处理过程直接写在initialValue上，犹如下面代码这种写法，会导致render渲染一次，富文本处理一次，重复处理，栈溢出。initialValue上写处理后的结果，处理的过程可以写在conponentDidMount生命周期里，一进页面就处理好，处理的结果存在state里，initialValue上拿到state里存的结果。第一次进行回显时，值写在initialValue身上，由于后端返回的时字符串，回显到富文本里，需要把字符串处理或转译下再回显到富文本框里。

react使用braft-editor报错

Haines

03-24

1965

Can't resolve 'react-dom/server' ./node_modules/draft-convert/lib/util/getElementHTML.js 错误排查： 1.看下node_modules/react-dom/下面有没有server.js，若有的话，你得看看是不是webpack什么地方有问题导致没有正确地import这个模块 2.发现webpack配置错误 ...

antd-theme-editor：自定义和预览ant设计主题和CSS样式覆盖

02-03

您还可以编辑css文件src/style-override.css以覆盖/编辑antd类的样式出口完成变量和样式的编辑后，通过此命令导出 yarn export 导出的文件将在dist目录中找到，并在您的项目中复制和使用更新故事故事已基于antd...

富文本braft-editor插件分享

xiao970615的博客

07-11

361

【代码】富文本braft-editor插件分享。

富文本编辑器braft-editor在React + ant design中的使用

sxww_zyt的博客

05-25

2915

本文主要介绍braft-editor在React结合ant design中的使用，包括文字、图片、超链接等处理

reactHooks+TS：富文本braft-editor常见用法

君莫笑

01-06

6282

关于reactHooks+TS中富文本插件btaft-editor的使用。

React 中使用 braft-editor 踩坑记，引用 braft-utils 有错误

超逸の学习技术博客

10-15

3038

最近接到一个需求，需要支持在文本输入框支持图片粘贴上传，但是在我们这边管理页面，对于用户提的一些问题显示又不支持 Matkdown。所以选择 braft-editor 来实现，发现提供一些配置项，因为我这边不需要那些加粗，下划线等等按钮，只需要上传图片，粘贴然后配合 COS 存链接就好了。遇到的问题首先我这个是 React 项目，其它项目不太清楚，然后使用 yarn。在 utils 官方仓库中，有相关 issues，链接在下方：引用 braft-utils 有错误 #500 其中也有人提及了一些解

Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错 / 同时使用mfsu和qiankun报错

qq_36904182的博客

12-15

4361

一、问题描述我们用antd pro v5搭建前端项目，启用qiankun微前端模式，终端报错如下： Uncaught (in promise) Error: Module “xxx” does not exist in container. while loading “xxx” from webpack/container/reference/mf 经过排查，上述问题其实是因为项目同时使用mfsu和qiankun导致的，而antd pro v5脚手架默认是开启mfsu功能的。二、解决方案方案一： 1

“Module ‘xxx‘ does not exist in container“

热门推荐

weixin_44134588的博客

08-04

1万+

今天写项目的时候 ,是使用的umi 框架,并且使用 mfsu 开启了热更新(会使项目更改之后的重新加载速度提高一大截) 今天的需求是使用maplibre在页面上创建一个地图,逻辑都写好了,但是就是安装依赖项 'maplibre-gl’之后,依赖引入老是失败; 找了一万年的原因Loading… 还是没找到0.0 最后在社区一直逛一直逛… 找到一个类似的问题,然后转念一想自己的项目也开启了mfsu, 然后就尝试了一下删掉src下的.umi文件夹,相当于清除了缓存,然后项目就跑通了, 点赞! 膜拜大佬! ..

Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错

MYD_Z的博客

02-16

2745

react项目使用antd Pro v5 搭建项目启动报错解决

ueditor修改字体无效

chenxiaoyi0207的博客

03-02

1903

ueditor中切换字体，换行、失焦操作后，全选修改字体，部分字体样式未修改。问题在github上也有：https://github.com/fex-team/ueditor/pull/3222 根据issue上@wangzh1010的方法还会有问题： 1.文本框内按backspace或delete键清空，再进行操作，第一行文本需要修改2次字体才会生效。原因是清除到空时，增加了占位符<br/>，改成空或domUtils.fillChar即可。domUtils.fillChar设置的是\u200B

使用braft-editor踩坑记录

weixin_44952328的博客

11-29

3601

后续需求有变动，需要添加额外的上传按钮，可以上传图片和office文档，发现之前简单的复制粘贴图片的方式满足不了新的需求。之后发现braft-editor官网中提到可以结合antd组件来做一系列的操作，所以毋庸置疑的选择了和Upload结合使用方式。allowPasteImage: true, // 是否允许直接粘贴剪贴板图片到编辑器。判断文件是图片还是其他格式，图片就转成IMAGE，其他文件，转成LINK。上传图片开始使用的media属性，能直接粘贴截图，很方便。(可上传图片、文档格式)

react-braft-editor富文本编辑器

WANGLING0108的博客

08-12

1306

react-braft-editor富文本编辑器

CSS样式没有生效的常见原因

Keep trying, keep going

04-30

2564

如果你的样式文件仍然无法生效，请逐步排查上述可能的原因，并确保样式文件的正确性和适用范围。另外，使用浏览器的开发者工具可以帮助你检查样式是否应用成功，并查看样式规则和层叠顺序的情况。优先级不足：可能是样式文件的选择器优先级不足以覆盖目标元素的默认样式。可以通过使用开发者工具检查元素的样式并查看应用的样式规则，以确定是否存在样式冲突。样式代码错误：检查样式文件中的代码是否存在语法错误、拼写错误或其他问题，确保样式规则书写正确。样式层叠顺序：样式的层叠顺序可能导致你的自定义样式被其他样式覆盖。

braft_editor富文本

晴天有何特别

04-19

2124

富文本编辑器也用过不少了，这次提供一个功能算是齐全，好用的braft_editor 我使用的react接入，大同小异,这里采用多媒体文件上传到七牛云，回调链接至标签的src上效果图我就懒得搞了，截取的别人的，代码是我自己写的 import React from "react"; import BraftEditor from "braft-editor"; // 引入编辑器样式 import "braft-editor/dist/index.css"; import api from "../../ap

Antd a-tabs组件样式修改