ueditor更改工具栏按钮,设置css样式,第二次无法正常加载的解决方法

今天项目上要用到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>


二:页面加载ueditor,图片大小的显示,和其他样式的设置

解决方法:找到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>


上述问题全部成功解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值