如題。
最近需要使用到網頁后台富文本編輯器。經過同學推薦,最后決定使用百度家的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>
- <span style="white-space:pre"> </span>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變小。