前言：
其实市面上的富文本编辑器还是不少的，在react项目里我们一般会用wangEditor，最大的原因是他已经集成在npm里面了，用起来比较方便，但是功能方面没有那么齐全，最近项目上有个问题，客户要求富文本编辑器里可以设置行间距，可以在编辑器里调整图片大小，搜了一下，可以设置行间距的不少，可以调整图片大小的可能只有百度的Ueditor了。于是入坑百度Ueditor。
官网地址：
不建议下完整版的代码，需要自己编译，很可能花大把的时间编译不成功。
本文代码github地址： 1、用create-react-app脚手架创建react项目
将下载好的文件夹放在public文件夹下。这里说一下为什么要用create-react-app，我们下好的源码是要放在跟index.html同一文件夹下的，打包的时候该文件夹下的文件不会被打包，同时要将Ueditor所在的文件夹复制到打包后的文件夹中，这个我还没有去细看到底webpack做了什么操作，但是creact-react-app产生的打包文件可以做到上述事情。
2018.6.7更新，如果不是create-react-app创建的项目，在开发时和前面说的一样要把文件放在和index.html同一个文件夹下，一般都是public，然后修改一下webpack相关的配置。研究了一下create-react-app里面关于webpack的配置，首先说一下create-react-app的start，build文件都在react-scripts包里面，需要在node-modules里面找到react-scripts才能找到start.js，build.js等。webpack的配置在build.js里面，他多做的事情就是吧public文件夹复制了一份，如图所示。如果需要自己配置的话可以参考一下create-react-app的build.js文件，代码贴在了文章末尾
2、引入及初始化
将下载好的文件夹放入到public文件下，与index.html同级。
并在index.html里面加入以下代码此时window对象里面会有UE对象。
在APP.js里面从初始化编辑器...componentDidMount(){ let UE = window.UE; UE.getEditor('container', { autoHeightEnabled: true, autoFloatEnabled: true }); }...render(){ return(div> ... );} 展示效果如图
3、封装组件
新建ueditor.js文件封装udeitor
import React from 'react';export default class Ueditor extends React.Component { constructor(props){ super(props); this.state={ id:this.props.id?this.props.id:null, ueditor :null, } } componentDidMount(){ let UE = window.UE; let {id} = this.state; if(id){ try { /*加载之前先执行删除操作，否则如果存在页面切换， 再切回带编辑器页面重新加载时不刷新无法渲染出编辑器*/ UE.delEditor(id); }catch (e) {} let ueditor = UE.getEditor(id, { autoHeightEnabled: true, autoFloatEnabled: true }); this.setState({ueditor }); } } render(){ let {id} = this.state; return ( </div> ); }} 在需要编辑器的页面引入组件并使用
import Ueditor from './component/ueditor';...render(){ return(div> ... ); 4、各种坑
4.1、全屏问题
全屏的处理函数在ueditor.all.js里面对函数进行修改即可实现全屏
源代码中的设置编辑器放大是根据父节点来放大的，但是既然是放大当然全屏比较high啊。so，改代码吧。修改后的代码如下_updateFullScreen:function () { if (this._fullscreen) { var vpRect = uiUtils.getViewportRect(); //修改为无论什么情况都相对于浏览器窗口全屏 //此处的height是整个编辑器的高度 this.getDom().style.cssText = 'border:0;position:fixed;left:0;top:0' + 'px;width:' + window.innerWidth + 'px;height:' + window.innerHeight + 'px;z-index:' + (this.getDom().style.zIndex * 1 + 1000); // uiUtils.setViewportOffset(this.getDom(), { left:0, top:this.editor.options.topOffset || 0 }); //设置编辑器内容的高度 this.editor.setHeight(window.innerHeight - this.getDom('toolbarbox').offsetHeight - this.getDom('bottombar').offsetHeight - (this.editor.options.topOffset || 0),true); //不手动调一下，会导致全屏失效 if(browser.gecko){ try{ window.onresize(); }catch(e){ } } } }, 主要修改的地方如下图：
图中修改的position:fixed，如果编辑器父元素设置了transform属性的话编辑器还是只相对于父节点放大 4.2、Ueditor图片保存问题
在使用的过程中发现了一个很尴尬的问题，就是无论你在编辑器中给图片什么格式，保存的时候他都会把格式去掉，也就是说我们保存的富文本的html里面所有的img标签都没有style，真的是调试了很久才发现问题在哪里。在编辑器的配置文件ueditor.config.js里面有一个配置whitList，修改这个配置项里面img的配置（在整个文件中搜索img即可找到），如图所示将style放进去，保存时img标签的style属性才会被保存，否则该标签会被移除，也就是说不管图片格式怎么设置均不可能保存成功
//2018年5月2日更新
4.3、Ueditor父组件props改变编辑器内容不渲染问题
这个要用到react 的componentWillReceiveProps这一函数
componentWillReceiveProps(newProps){ let {editor} = this.state; if(newProps.content){ //有内容需要更新时，newProps.content是你需要更新的编辑器的内容，content是自己设置的prop editor.addListener("ready", function () { // editor准备好之后才可以使用 editor.setContent(newProps.content); }); } }, //2018年6月8日更新
4.4、一个页面实例化多个Ueditor编辑器
这个问题其实不算问题，主要是代码习惯，之前后台的小朋友把ueditor作为了全局变量，导致了实例化两个ueditor时，每次更改只保存了最后一个编辑器的内容，所以，必须要把实例化的编辑器放在state里面，通过state来更新并使用编辑器。同时在使用页面两个编辑器的id要区分开。
附：creact-react-app中build.js的内容
// @remove-on-eject-begin/** * Copyright (c) 2015-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */// @remove-on-eject-end'use strict';// Do this as the first thing so that any code reading it knows the right env.process.env.BABEL_ENV = 'production';process.env.NODE_ENV = 'production';// Makes the script crash on unhandled rejections instead of silently// ignoring them. In the future, promise rejections that are not handled will// terminate the Node.js process with a non-zero exit code.process.on('unhandledRejection', err => { throw err;});// Ensure environment variables are read.require('../config/env');const path = require('path');const chalk = require('chalk');const fs = require('fs-extra');const webpack = require('webpack');const config = require('../config/webpack.config.prod');const paths = require('../config/paths');const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');const printHostingInstructions = require('react-dev-utils/printHostingInstructions');const FileSizeReporter = require('react-dev-utils/FileSizeReporter');const printBuildError = require('react-dev-utils/printBuildError');const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;const useYarn = fs.existsSync(paths.yarnLockFile);// These sizes are pretty large. We'll warn for bundles exceeding them.const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;// Warn and crash if required files are missingif (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1);}// First, read the current file sizes in build directory.// This lets us display how much they changed later.measureFileSizesBeforeBuild(paths.appBuild) .then(previousFileSizes => { // Remove all content but keep the directory so that // if you're in it, you don't end up in Trash fs.emptyDirSync(paths.appBuild); // Merge with the public folder copyPublicFolder(); // Start the webpack build return build(previousFileSizes); }) .then( ({ stats, previousFileSizes, warnings }) => { if (warnings.length) { console.log(chalk.yellow('Compiled with warnings.\n')); console.log(warnings.join('\n\n')); console.log( '\nSearch for the ' + chalk.underline(chalk.yellow('keywords')) + ' to learn more about each warning.' ); console.log( 'To ignore, add ' + chalk.cyan('// eslint-disable-next-line') + ' to the line before.\n' ); } else { console.log(chalk.green('Compiled successfully.\n')); } console.log('File sizes after gzip:\n'); printFileSizesAfterBuild( stats, previousFileSizes, paths.appBuild, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE ); console.log(); const appPackage = require(paths.appPackageJson); const publicUrl = paths.publicUrl; const publicPath = config.output.publicPath; const buildFolder = path.relative(process.cwd(), paths.appBuild); printHostingInstructions( appPackage, publicUrl, publicPath, buildFolder, useYarn ); }, err => { console.log(chalk.red('Failed to compile.\n')); printBuildError(err); process.exit(1); } );// Create the production build and print the deployment instructions.function build(previousFileSizes) { console.log('Creating an optimized production build...'); let compiler = webpack(config); return new Promise((resolve, reject) => { compiler.run((err, stats) => { if (err) { return reject(err); } const messages = formatWebpackMessages(stats.toJson({}, true)); if (messages.errors.length) { // Only keep the first error. Others are often indicative // of the same problem, but confuse the reader with noise. if (messages.errors.length > 1) { messages.errors.length = 1; } return reject(new Error(messages.errors.join('\n\n'))); } if ( process.env.CI && (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') && messages.warnings.length ) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + 'Most CI servers set it automatically.\n' ) ); return reject(new Error(messages.warnings.join('\n\n'))); } return resolve({ stats, previousFileSizes, warnings: messages.warnings, }); }); });}function copyPublicFolder() { fs.copySync(paths.appPublic, paths.appBuild, { dereference: true, filter: file => file !== paths.appHtml, });}