Ueditor踩坑之旅（react）
2018-04-24 本文已影响342人
前端喵
2018年4月23日：
前言：
其实市面上的富文本编辑器还是不少的，在react项目里我们一般会用wangEditor，最大的原因是他已经集成在npm里面了，用起来比较方便，但是功能方面没有那么齐全，最近项目上有个问题，客户要求富文本编辑器里可以设置行间距，可以在编辑器里调整图片大小，搜了一下，可以设置行间距的不少，可以调整图片大小的可能只有百度的Ueditor了。于是入坑百度Ueditor。
官网地址： http://ueditor.baidu.com/website/
不建议下完整版的代码，需要自己编译，很可能花大把的时间编译不成功。
image.png
本文代码github地址：https://github.com/AMM9394/ueditorTest.git
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文件，代码贴在了文章末尾
public.png
2、引入及初始化
将下载好的文件夹放入到public文件下，与index.html同级。
并在index.html里面加入以下代码
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>
此时window对象里面会有UE对象。
在APP.js里面从初始化编辑器
...
componentDidMount(){
let UE = window.UE;
UE.getEditor('container', {
autoHeightEnabled: true,
autoFloatEnabled: true
});
}
...
render(){
return(div>
...
<textarea id="container"></textarea>
</div>);
}
展示效果如图
image.png
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>
<textarea id={id} />
</div>
);
}
}
在需要编辑器的页面引入组件并使用
import Ueditor from './component/ueditor';
...
render(){
return(div>
...
<Ueditor id={'myeditor'}/>
</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){
}
}
}
},
主要修改的地方如下图：
image.png
图中修改的position:fixed，如果编辑器父元素设置了transform属性的话编辑器还是只相对于父节点放大
4.2、Ueditor图片保存问题
在使用的过程中发现了一个很尴尬的问题，就是无论你在编辑器中给图片什么格式，保存的时候他都会把格式去掉，也就是说我们保存的富文本的html里面所有的img标签都没有style，真的是调试了很久才发现问题在哪里。在编辑器的配置文件ueditor.config.js里面有一个配置whitList，修改这个配置项里面img的配置（在整个文件中搜索img即可找到），如图所示将style放进去，保存时img标签的style属性才会被保存，否则该标签会被移除，也就是说不管图片格式怎么设置均不可能保存成功
image.png
//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 missing
if (!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,
});
}
