天天看點

Ueditor自定義預設寬度高度

如題。

        最近需要使用到網頁背景富文本編輯器。經過同學推薦,最後決定使用百度家的Ueditor.

官方位址:http://ueditor.baidu.com/website/

貼吧位址:ueditor讨論吧

官方提供了網頁上非常友善的自定義工具欄的功能。自定義之後直接下載下傳對應的代碼包并按照文檔部署到項目中即可。其中主要的問題是路徑的配置。

首先是将下載下傳好的代碼包釋出到我們項目的根目錄下面。然後在需要添加富文本編輯器的頁面頭部添加如下代碼:

<script type="text/javascript" src="相對該文檔的路徑/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="相對該文檔的路徑/ueditor/ueditor.all.js"></script>
<script>
	window.UEDITOR_HOME_URL = "/項目相對網址池絕對路徑/ueditor";
</script>
           

配置路徑這一塊是非常重要的。特别是下面的Ueditor的路徑,是相對我們整個代碼庫的目錄的。

配置完成之後,直接在我們網頁中的<textarea>标簽下面添加ueditor的初始化代碼:

<script type="text/javascript">
   	var editor = new UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400 });
        editor.render("actDescribe");
</script>
           

官方的文檔并沒有給出如何設定ueditor的寬度和高度的說明。這是我在網上網友那裡找到的解決方法。在聲明編輯器的變量的時候,在參數清單中添加對initialFrameHeight和initialFrameWidth的設定即可。注意,數值後面不需要添加px。

可是,這種方法有時候奏效有時候也不奏效,因為我碰過一種情況就是無論如何調整initialHeight和initialWidth的數值,編輯器的大小都還是不會改變。這個時候,我發現,可以通過調整editor所跟随的textarea的寬高來撐開editor的大小。這也是一種方法,各位同學在官方說明文檔出來之前可以兩種方法都嘗試一下。

當然,好用的文本編輯器還是有很多的,例如kindeditor,之前準備使用這個的,而其文檔方面也比較齊全,同時,整個編輯器的size也比較小,對網頁的加載速度比較有利。百度的Ueditor還是有點龐大。加載時會有卡頓的速度。估計是我對底層代碼的研究不夠,多了很多不必要的内容。慢慢研究或許可以使得Ueditor變小。

繼續閱讀