1.載入js,css文件
<script src="ueditor/editor_config.js" type="text/javascript"></script>
<script src="ueditor/editor_all.js" type="text/javascript"></script>
<link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />
相比較這款富文本編輯器還是不錯的,輕量級,功能全,UI也還不錯。
配置的時候費了點時間,現在回過頭看其實相當簡單,把相關的文件路徑設置正確即可。
我的目錄結構是:www/CMS/MyEditor/
上傳圖片的地址是: www/images/news/content/
修改editor_config.js:
*/
參數設置是否正確。如果上傳正確,但是在富文本框中顯示紅叉也是說明路徑錯了,把鼠標移動到未顯示成功的圖片上會出現懸浮菜單,點擊“修改/編輯”,在圖片屬性窗口中你就可以看見圖片的路徑了,就可以發現錯在哪里。
2.頁面配置
<div id="myEditor"></div> //可以是aspx控件 只要id正確即可
<script type="text/javascript">
var ue = new baidu.editor.ui.Editor();
ue.render("myEditor"); //這里填寫要改變為編輯器的控件id
</script>
3.editor_config.js 文件中的路徑配置
var tmp = window.location.pathname;
URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //這里你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑(指以http開頭的絕對路徑)
4.如果你要使用傳圖片功能,還需要修改net文件下的幾個文件截圖說明吧(這個路徑可以直接刪除的,試試。不行了自己再調整下)。
改為-->
同理將net文件下其它文件類似的錯誤更正后即可上傳圖片。
圖片上傳默認位置為:net文件夾下。上傳一張打開即可發現一個upload文件夾。
5.ueditor 的很多默認配置都在 editor_config.js這個文件中,細心看的話,開啟或關閉其中的配置是可以解決很多問題的。
6.我在使用過程中還遇到過編輯器內容影響整體頁面的布局問題,這問題是在editor_all.js這個文件中修改的默認樣式問題的。
復制代碼
/**
* 渲染編輯器的DOM到指定容器,必須且只能調用一次
* @public
* @function
* @param {Element|String} container
*/
render:function ( container ) {
var me = this, options = me.options;
if ( container.constructor === String ) {
container = document.getElementById( container );
}
if ( container ) {
var useBodyAsViewport = ie && browser.version < 9,
html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
'<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
'<style type=\'text/css\'>' +
//這些默認屬性不能夠讓用戶改變
//選中的td上的樣式
'.selectTdClass{background-color:#3399FF !important;}' +
'table.noBorderTable td{border:1px dashed #ddd !important}' +
//插入的表格的默認樣式
'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +
//分頁符的樣式
'.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +
//錨點的樣式,注意這里背景圖的路徑
'.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +
//設置四周的留邊
'.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +
//設置默認字體和字號
'body{margin:8px;font-family:\'宋體\';font-size:16px;}' +
//針對li的處理
'li{clear:both}' +
//設置段落間距
'p{margin:5px 0;}'
+ ( options.initialStyle || '' ) +
'</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';
多個ueditor
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
editor.getContent();
var editor1= new baidu.editor.ui.Editor();
editor1.render("myEditor1");
editor1.getContent();