React 接入 Ueditor + xiumi

最新推荐文章于 2024-09-24 22:57:26 发布
最新推荐文章于 2024-09-24 22:57:26 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 前端学习 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hys1253731584/article/details/104039195
版权
本文档介绍了如何在React应用（基于antd-pro）中接入Ueditor，并结合秀米实现图文编辑。遇到的问题包括onChange导致光标重置、iframeUrl配置、XXS过滤白名单调整以及图片转存至自己服务器的处理。另外，文中还记录了两个bug：秀米未登录时自定义文字不保存，以及秀米添加内容时光标不能在section元素上。
摘要由CSDN通过智能技术生成

在react（antd-pro）中接入秀米
*已放弃该方案，使用wangeditor+秀米

  1. 打包ueditor
  2. 在react将打包后的ueditor文件夹作为静态资源放入项目public目录下。
  3. 使用react-ueditor-wrap组件在页面使用ueditor。这里有一个坑，若使用onChange修改组件value值，编辑器光标位置会被重置，在表单中使用时要引入另一个值记录编辑器内容。
  4. 引入秀米，秀米官方给了在ueditor中使用的文档。秀米图文排版UEditor插件示例。在react中引入时iframeUrl无法按官方文档中的以路径的方式，修改路径为文件url,因为文件的地址都在react-ueditor-wrap上定义，我把html的链接也放在react中进行定义。只需要在加载组件前设置window.xiumi_iframeUrl的值。
  5. 到这一步我们已经可以在ueditor上点击秀米的图标编辑并添加至ueditor中。这里有一个官方文档没给出的问题，xxs过滤白名单上要额外修改img，添加style，防止style被过滤掉
  6. 由于在项目中第一次加载Ueditor会有延迟，所以监听window.UE对象添加loading动画。
由于某些原因，图片的转存也需要在前端直接处理~

思路大概是： 在秀米文档添加到ueditor的事件上获取添加的富文本value，提取所有的秀米图片链接，转存至自己的服务器，然后替换原来的图片地址。图片上传时会有图片防盗链的跨域问题。在html加入 <meta name="referre

最低0.47元/天 解锁文章
dcry
关注
专栏目录
ueditor+秀米
Lizi_1的博客
05-26 1849
秀米官方说明了，他是依附百度编辑器（Ueditor）内核得，所以前端使用秀米就得先把百度编辑器给接了 百度编辑器接入步骤： 1，从Ueditor上面把相关得文件下下来，jsp-utf8版本（官网地址：http://ueditor.baidu.com/website/download.html） 2，将下载得文件解压到自己得服务器上或者自己本地（因为秀米跑本地会报很多错，所以我就直接放到服务器上面得，秀米得文件时后面得步骤加进去得，现在可以忽略掉它） 3，在项目入口文件引入 <script type
探索React UEditor：一款强大的富文本编辑器组件
gitblog_00028的博客
04-06 708
探索React UEditor：一款强大的富文本编辑器组件 去发现同类优质开源项目:https://gitcode.com/ React UEditor是一个基于React框架的、高度可定制的富文本编辑器组件。它源于百度UEditor，并针对React生态系统进行了优化和重构，提供了更加无缝的集成体验。在本文中，我们将探讨该项目的核心特性，技术实现，以及如何利用它来提升你的Web应用的用户体验。 ...
react-ueditor:一个React器组件
05-14
react-ueditor 使用 react 框架对 ueditor 进行封装和扩展 :sparkles: 特性 支持更灵活的图片和音视频资源上传 支持同个页面存在多个编辑器实例 支持对复制进来的图片进行操作 允许扩展工具栏，支持在扩展中使用已有的 react 组件 :package: 下载 # 使用 npm 安装 npm install ifanrx-react-ueditor --save # 使用 yarn 安装 yarn add ifanrx-react-ueditor :hammer: 使用 import ReactUeditor from 'ifanrx-react-ueditor' <ReactUeditor ueditorPath={> :electric_plug: 插件 extendControls 已不推荐使用，请直接使用 plugins，指定插件。 插件分为两种，一种是内
React中使用UEditor
weixin_33872566的博客
08-21 1024
前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入ueditor，会存在各种不正交的问题，需要注意。 引入 首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要...
【推文制作】秀米简明教程 1.0
最新发布
HXR_plume的博客
09-24 1384
在使用秀米之前，我们会有一个通过浏览器找到秀米并注册的问题，不过，由于我们使用的是官方账号，因此只需要通过浏览器搜索“秀米”即可，这里我们也是将秀米的网址粘贴在下面啦 ->秀米网址点这里这里我们将正确进入秀米后依次看到的几个页面展示一下：这个页面是秀米的首页，上面有“我的秀米”、“秀米会员”等几个子页面，有空的朋友可以进入“教程”一栏，阅读官方的权威教程，里面更加全面和权威。当然后续我们最常用的是“我的秀米”，基本每次到这个页面都是直接点击，进入我们自己的秀米仓库。
react 使用 UEditorPlus
qq_26450889的博客
06-13 219
② 解压 UEditorPlus 到静态资源目录。
react-ueditor-xiumi,秀米编辑器首次加载图片上传，视频上传无法使用问题
weixin_37782353的博客
07-19 703
ueditor
React中使用UEditor百度富文本的方法
12-10
接下来，我们需要对UEditor进行封装，使其成为React组件。创建一个名为`UEditor`的React类组件，它会接收`id`、`width`和`height`等属性作为输入，用于设置编辑器的ID和大小。在`componentDidMount`生命周期方法中，...
探索React之强大编辑器：react-ueditor
gitblog_00091的博客
03-30 631
探索React之强大编辑器：react-ueditor 项目地址:https://gitcode.com/gh_mirrors/re/react-ueditor 项目简介 在前端开发中，一个功能完备、易用且可高度定制的富文本编辑器是必不可少的工具。就是这样一款专为React框架量身打造的富文本编辑器组件。它基于著名的UEditor，并将其与React的强大能力相结合，为你提供了一个高效、稳定的编辑...
ueditor 图片上传路径的配置+react中使用
memiwao的博客
12-13 2002
ueditor 图片上传路径的配置 域名或ip必须一样 如下：www.test.com，否则图片上传有问题 http://www.test.com:8080/ueditor 为部署到tomcat上的ueditor工程地址 部署tomcat工程可以参考这位大神的https://blog.csdn.net/chichuhanga/article/details/78838674 js改动的地方有四处：...
Reactjs use ueditor
11-28
react 中使用富文本框，ueditor中包含了JqueryJs 解决react中上传图片的问题。 ueditor文件夹是压缩过的ueditor，index.html是如何引用富文本的js。 componentDidMount(){ let config = {elementPathEnabled: false, wordCount: false, charset: 'utf-8'}; config.serverUrl = conf.editorServer; config.initialFrameHeight = 320; let toolbars = [['fontfamily', 'fontsize', 'paragraph', 'underline', 'fontborder', 'bold', 'italic', 'strikethrough', 'superscript', 'subscript', '|', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 'selectall', 'cleardoc', 'fullscreen', 'undo', 'redo'], ['forecolor', 'backcolor', 'indent', 'lineheight', 'justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', 'insertorderedlist', 'insertunorderedlist', '|', 'link', 'simpleupload',]]; config.toolbars = toolbars; let editor = UE.getEditor("myEditor", config); editor.ready(function () { editor.setContent(content || ''); }); } 界面中代码 <FormItem label="详细说明:" labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}> <div style={{lineHeight:'normal'}}> <script type="text/plain" id="myEditor"></script> </div> </FormItem> 获取富文本框中的内容 if (editor.hasContents()) { let content = editor.getContent (); }
react-ueditor:演示
05-17
安装 npm i --save react-ueditor-wrap 使用 import RcUeditor from 'react-ueditor-wrap'; class Demo extends React.Component { hanldeChage = (value) => { console.log('RcUeditor', value); } render() { return ( <div> <RcUeditor xss=removed> </div> ); } } export default Demo; api 成员 说明 类型 默认值 value 设置编辑器的值 string - ueditorUrl 设置ued
react html编辑器,React项目中使用百度编辑器Ueditor
weixin_33905037的博客
06-20 393
近期在做前端项目，需要用到富文本编辑器。因为团队提出的是使用百度Ueditor，所以也就没有再去看其他的富文本编辑器。百度编辑器诞生比较久，没有使用模块化，不修改一下不能直接在React中使用。而我对前端模块化那些东西并没有研究过，所以直接参考的EdmundChen的react+ueditor。通过看他的文章和他的源码再加上控制台那些报错一步步就调试改正到最后可以正常使用基本功能。这里在这里写下做...
React里面如何使用UEditor
小海龟的博客
10-25 6334
先去官网下载UEditor：https://ueditor.baidu.com/website/index.html 文档结构图 注意：ueditor要放在public目录下面的static里面 接下来创建react的UEditor组件 import React, { Component } from 'react'; import './style.css...
React-UEditor 使用教程
gitblog_00477的博客
08-16 362
React-UEditor 使用教程 项目地址:https://gitcode.com/gh_mirrors/re/react-ueditor 项目介绍 React-UEditor 是一个基于 React 框架对 UEditor 进行封装和扩展的富文本编辑器组件。它支持更灵活的图片和音视频资源上传，允许在同一页面存在多个编辑器实例，支持对复制进来的图片进行操作，并允许扩展工具栏。此外，它还支持在扩...
[react]在antd pro中对Ueditor富文本编辑器进行封装
weixin_54122176的博客
12-08 1799
【react】在antd pro 中对富文本编辑器封装
react hook使用UEditor引入秀米图文排版
weixin_39818813的博客
02-21 1434
里面坑比较多，细节也比较多以下使用的是react 18 + ice3.0，使用其他react脚手架的配置基本相同，例如umi4。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值