React中使用UEditor

最新推荐文章于 2024-08-16 07:46:33 发布

云稽

最新推荐文章于 2024-08-16 07:46:33 发布

阅读量7.1k

点赞数

分类专栏： React 文章标签： React 前端 UEditor

本文链接：https://blog.csdn.net/wdz512/article/details/82022191

版权

本文详细介绍了在React项目中使用UEditor遇到的问题及其解决方案，包括禁止编辑器自动增高、自定义样式、导航条渲染、模拟placeholder、工具条显示、自定义按钮与图片上传以及内联样式添加等。同时，文章提到了在React中使用UEditor的不正交问题和一些使用体验上的吐槽。

摘要由CSDN通过智能技术生成

前言

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

引入

首先在ueditor官网下载最新安装包，然后在项目入口的html中导入（导入方式不一，可以采用import的方式，需要自行度娘。但是无论哪种引入方式，只要想自定义功能，不正交问题就难以避免QAQ）。不管三七二十一先跑起来再说。。

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 配置文件 -->
    <script type="text/javascript" src="path/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="path/ueditor.all.js"></script>
    ······
</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);