一、請根據需要到官方網站下載(http://ueditor.baidu.com/build/build_down.php?t=1_2_5_1-utf8-php)(這是PHP服務器端的下載包)。
二、UEditor相關操作
1、在根目錄下新建文件夾存放相關資源文件,此名爲editor.
2、把下載的源碼包裏的相關文件拷貝到editor文件中。
3、在使用編輯器的html頁面導入以下js文件
<script type="text/javascript" charset="utf-8" src="editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_all.js"></script>
<script type="text/javascript" src="third-party/SyntaxHighlighter/shcore.js">
</script> <link rel="stylesheet" href="third-party/SyntaxHighlighter/shCoreDefault.css" type="text/css" />
4、在html頁面創建編輯容器並實例化編輯器,代碼如下:
<textarea id="editor"></textarea>
<scripttype="text/javascript">
//實例化編輯器
var ue = UE.getEditor('editor');
</script>
5、在editor_config.js中查找URL變量,配置編輯器在你項目中的路徑。如果不是放在項目當中使用,URL變量可以不用修改。但是在項目當中使用就一定得修改。
URL= UEDITOR_HOME_URL || "編輯器在你項目中的路徑";//重要,必須正確配置
三、自定義配置
1、編輯器工具欄只顯示源代碼,並且初始化的時候進入源碼模式。
在editor_config.js中查找 ,sourceEditorFirst:true;把前面的註釋去掉,在html當中寫入的代碼如下
<script type="text/javascript">
//工具欄的功能
var editor = new baidu.editor.ui.Editor({
toolbars:[['source']] //自定義工具欄顯示的按鈕
});
editor.render("editor");
</script>
2、讓編輯器寬自適應
在editor_config.js中查找
,initialFrameWidth:"100%" //把數值改成百分比
,scaleEnabled:true
,minFrameWidth:800 //編輯器拖動時最小寬度,默認800
,minFrameHeight:320 //編輯器拖動時最小高度,默認320
把前面的註釋去掉就可以了。
以上的內容是我在項目當中遇到的問題。在網上搜索都沒有找到滿意的答案。自己慢慢研究後做一下總結,方便其他需要用到的朋友使用。
四.更多詳細使用幫助請查看官方解釋
在線文檔:http://ueditor.baidu.com/website/document.html
UEditor論壇:http://www.ueditorbbs.com/forum.php