ueditor


    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:

*/

window.UEDITOR_HOME_URL = "/CMS/MyEditor/";
    var URL;
 
 
  var tmp = window.location.pathname;
  URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//這里你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑(指以http開頭的絕對路徑)
 
 
  window.UEDITOR_CONFIG = {
 
      //為編輯器實例添加一個路徑,這個不能被注釋
      UEDITOR_HOME_URL : URL
 
      //圖片上傳配置區
      ,imageUrl:URL+"App/imageUp.ashx"          //圖片上傳提交地址
      ,imagePath:".."                //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
      //,imageFieldName:"upfile"                  //圖片數據的key,若此處修改,需要在后台對應文件修改對應參數
      //,compressSide:0                        //等比壓縮的基准,確定maxImageSideLength參數的參照對象。0為按照最長邊,1為按照寬度,2為按照高度
      ,maxImageSideLength:1900                 //上傳圖片最大允許的邊長,超過會自動等比縮放,不縮放就設置一個比較大的值,更多設置在image.html中
 
 
(紅字的部分是修改過的)
 然后修改一下imageUp.ashx文件中的上傳路徑即可:
 
String pathbase = "/images/News/content/";                   //保存路徑
 
就這樣,其他的使用參考官方文檔就行。如果在CHORME瀏覽器下不能正常上傳圖片,請檢查 editor_config.js文件中 ,imagePath:".."
參數設置是否正確。如果上傳正確,但是在富文本框中顯示紅叉也是說明路徑錯了,把鼠標移動到未顯示成功的圖片上會出現懸浮菜單,點擊“修改/編輯”,在圖片屬性窗口中你就可以看見圖片的路徑了,就可以發現錯在哪里。

 

 

 

 

 

 

 

 

 

 

 

 


      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();


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM