今天项目上要用到ueditor,我在使用中遇到了一些问题,最后解决。
下载UEditor【1.4.3 JSP版本】.下载地址:http://ueditor.baidu.com/website/download.html
在WebContent目录新建文件夹ueditor1_4_3,右键文件夹import->File System->Next->Browse->选择你下载的ueditor整个目录
拷贝ueditor1_4_3/jsp/lib库中的包到项目lib文件夹
使用的过程中遇到的问题:
一:ueditor工具栏按钮过多,本地项目使用不需要太多按钮
解决方法 ①:修改 ueditor.config.js 里面的 toolbars
解决方法②:实例化编辑器的时候传入 toolbars 参数toolbars参数即为工具栏按钮参数,与ueditor.config.js中的toolbars对应
<script type="text/javascript">
$(document).ready(function(){
var ue = UE.getEditor('editor', {
toolbars: [
[['fullscreen','source','undo']]
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
});
</script>
解决方法:找到ueditor1_4_3->themes->iframe.css,该css文件即为设置内容样式的配置,记得写好样式后清除浏览器缓存,既能看到改变
三:ueditor第一次打开正常,关闭后第二次打开不显示?
查看源码找到:
/**
* @file
* @name UE
* @short UE
* @desc UEditor的顶部命名空间
*/
/**
* @name getEditor
* @since 1.2.4+
* @grammar UE.getEditor(id,[opt]) => Editor实例
* @desc 提供一个全局的方法得到编辑器实例
*
* * ''id'' 放置编辑器的容器id, 如果容器下的编辑器已经存在,就直接返回
* * ''opt'' 编辑器的可选参数
* @example
* UE.getEditor('containerId',{onready:function(){//创建一个编辑器实例
* this.setContent('hello')
* }});
* UE.getEditor('containerId'); //返回刚创建的实例
*
*/
UE.getEditor = function(id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};
UE.delEditor = function(id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};
在第一次跳转到编辑器界面时,正常的实例化了一个新的编辑器对象,并放入instances,调用editor.render(id)渲染编辑器的DOM;
第二次初始化时却仅从容器中取到实例:var editor = instances[id]; 直接返回了editor对象,而编辑器的DOM并没有渲染。
解决方法①:
<script type="text/javascript">
$(document).ready(function(){
UE.getEditor('editor').render('editor');
});
</script>
解决方法②:
<script type="text/javascript">
$(document).ready(function(){
UE.delEditor('editor');
var ue = UE.getEditor('editor');
});
</script>
上述问题全部成功解决