1. 程式人生 > >ueditor更改工具欄按鈕,設定css樣式,第二次無法正常載入的解決方法

ueditor更改工具欄按鈕,設定css樣式,第二次無法正常載入的解決方法

今天專案上要用到ueditor,我在使用中遇到了一些問題,最後解決。

在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>


上述問題全部成功解決