React中使用UEditor百度富文本的方法_react使用ueditor,ueditorreact

18 浏览量更新于2023-05-04 评论收藏 144KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

React中使用中使用UEditor百度富文本的方法百度富文本的方法

前言前言

本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项

目中导入ueditor，会存在各种不正交的问题，需要注意。

引入引入

首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要想自定义功能，不正交问

题就难以避免QAQ）。不管三七二十一先跑起来再说。。

<!DOCTYPE HTML>

<head>

<title>ueditor demo</title>

</head>

<body>

······

</body>

</html>

在React项目中使用ueditor要注意

导入的路径，笔者使用的是项目经webpack打包之后的相对路径。

导入顺序，配置文件要先于源码。

笔者这种引入方式存在缓存问题，所以修改ueditor.all.js后需要及时清理缓存，测试新的代码。

封装封装

/**

* 封装UEditor

import React from 'react';

import './index.less';

class UEditor extends React.Component {

constructor(props) {

super(props);

this.editor = {};

this.id = '';

}

······

componentDidMount() {

let UE = window.UE;

let id = this.id;

if (id) {

try {

/* 加载之前先执行删除操作，否则如果存在页面切换，

再切回带编辑器页面重新加载时不刷新无法渲染出编辑器 */

UE.delEditor(id);

} catch (e) {}

let ueditor = UE.getEditor(id, {

toolbars: [

['bold', 'italic', 'underline', 'kityformula', 'diyimg'] ],

initialContent: '',

autoHeightEnabled: false,

autoFloatEnabled: false,

elementPathEnabled: false,

wordCount: false,

enableAutoSave: false,

initialFrameWidth: this.props.width,

initialFrameHeight: this.props.height

});

}

render() {

this.id = this.props.id;

return <div styleName="content" id={this.id} />;

}

export default UEditor;

笔者在项目中使用了加粗，斜体，下划线，插入图片，公式等功能，想要自定义配置均可参照ueditor.config.js修改。具体的将一一介绍，最后实现效果如下：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38724247

粉丝: 8
资源: 915

会员权益专享

React中使用UEditor百度富文本的方法

评论0

会员权益专享

最新资源

React中使用UEditor百度富文本的方法

评论0

react-ueditor:一个React器组件

react 富文本

Reactjs use ueditor

react-ueditor-wrap

UEditor富文本编辑器

react引用Ueditor

ueditor react

react提取富文本的方法？

react native 怎么使用富文本编辑器

Umi4配置百度富文本

Umi中引入Ueditor

reacthooks和antd form.submit校验react-draft-wysiwyg富文本框，输入内容提示立马消失。写一个小demo

react富文本编辑框

react富文本編輯器

react 富文本编辑器

react native 解析富文本

react 中 wangeditor富文本编辑器中 insertFn函数

react前端使用百度地图中的雷达图

react将富文本变成json

vue react dom结构成富文本插入

会员权益专享

最新资源