本文将介绍笔者在反应的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入Ueditor,会存在各种不正交的问题,需要注意。
首先在ueditor官网下载最新安装包,然后在项目入口的html中导入(导入方式不一,可以采用进口的方式,需要自行度娘。但是无论哪种引入方式,只要想自定义功能,不正交问题就难以避免QAQ)。不管三七二十一先跑起来再说。
& lt; !DOCTYPE HTML>
& lt; html lang=癳n - us”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> ueditor demo
& lt;/head>
& lt; body>
& lt; !——配置文件——比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/path/ueditor.config.js "祝辞& lt;/script>
& lt; !——编辑器源码文件——比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/path/ueditor.all.js "祝辞& lt;/script>
······
& lt;/body>
& lt;/html>
之前
在反应项目中使用ueditor要注意
<李>导入的路径,笔者使用的是项目经webpack打包之后的相对路径。
<李>导入顺序,配置文件要先于源码。
<李>笔者这种引入方式存在缓存问题,所以修改ueditor.all.js后需要及时清理缓存,测试新的代码。
/* *
*封装UEditor
*/从“反应”进口的反应;
进口的。/index.less”;
类UEditor延伸反应。组件{
构造函数(道具){
超级(道具);
这一点。编辑={};
这一点。id=";
}
······
componentDidMount () {
让问题=window.UE;
让id=this.id;
如果(id) {
尝试{/*加载之前先执行删除操作,否则如果存在页面切换,
再切回带编辑器页面重新加载时不刷新无法渲染出编辑器*/UE.delEditor (id);
}捕捉(e) {}
让ueditor=问题。getEditor (id, {
工具栏:[
[“大胆”,“斜体”,‘下划线’,‘kityformula’,‘diyimg’)
),
initialContent:”,
autoHeightEnabled:假的,
autoFloatEnabled:假的,
elementPathEnabled:假的,
wordCount:假的,
enableAutoSave:假的,
initialFrameWidth: this.props.width,
initialFrameHeight: this.props.height
});
}
}
呈现(){
这一点。id=this.props.id;
返回& lt; div styleName属性="内容" id={。id}/祝辞;;
}
}
出口默认UEditor;
之前
笔者在项目中使用了加粗,斜体,下划线,插入图片,公式等功能,想要自定义配置均可参照ueditor.config.js修改。具体的将一一介绍,最后实现效果如下:
问题总结:
<强> 1。禁止自动增高,改用滚动条
autoHeightEnabled:假
initialFrameWidth: this.props.width
initialFrameHeight: this.props.height
<代码> autoHeightEnabled>
<强> 2。自定义全局样式,如容器的填充、p标签的行高等
解决方法:ueditor.all.js的第6800多行的<代码> 渲染方法,在其中可以自定义全局样式。
<强> 3。导航条切换后,无法再次渲染
解决方法:在每次ueditor实例化之前,先删除对应的id
UE.delEditor (id);
原因分析:
从实例化和卸载实例的源码来看:
getEditor:
问题。选择getEditor=function (id) {
var=编辑实例(id);
如果编辑器(!){
编辑=实例(id)=new UE.ui.Editor(选择);
editor.render (id);//渲染编辑器
}
返回编辑器;
};
之前
delEditor:
UE.delEditor=function (id) {
var编辑器;
如果(编辑=实例(id)) {
编辑器。关键,,editor.destroy ();
删除实例(id)
}
};
