Ueditor和CKeditor 兩款編輯器的使用與配置

時間 2019-11-18

標籤 ueditor ckeditor 編輯器使用配置简体版

原文原文鏈接

一丶ueditor 百度編輯器javascript

1.官方文檔，演示，下載地址：http://ueditor.baidu.com/website/index.htmlcss

2.百度編輯器的好：Editor是由百度web前端研發部開發所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色。html

3.若是想定製你想要的編輯器功能：查看官方網站的下載頁面便可。
前端

4.編輯器展現：java

5.百度編輯器配置。web

1.載入js，css文件api

<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" />

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 文件中的路徑配置session

    var tmp = window.location.pathname;
    URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //這裏你能夠配置成ueditor目錄在您網站的相對路徑或者絕對路徑（指以http開頭的絕對路徑）

4.若是你要使用傳圖片功能，還須要修改net文件下的幾個文件截圖說明吧（這個路徑能夠直接刪除的，試試。不行了本身再調整下）。app

改成-->

同理將net文件下其它文件相似的錯誤更正後便可上傳圖片。

圖片上傳默認位置爲：net文件夾下。上傳一張打開便可發現一個upload文件夾。

5.ueditor 的不少默認配置都在 editor_config.js這個文件中，細心看的話，開啓或關閉其中的配置是能夠解決不少問題的。

6.我在使用過程當中還遇到過編輯器內容影響總體頁面的佈局問題，這問題是在editor_all.js這個文件中修改的默認樣式問題的。

  me = , options = ( container.constructor ==== useBodyAsViewport = ie && browser.version < 9= ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                                '<style type=\'text/css\'>' +                            
                            
                                '.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{clear:both}' +                            
                                'p{margin:5px 0;}'
                                + ( options.initialStyle || '' ) +
                                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

最後對這個編輯器總結下:很好用的，代碼很容易讀懂，便於修改配置爲本身喜歡的想要的。

二丶CKEditor丶CKFinder 國外知名編輯器

1.官方文檔，演示，下載地址：http://ckeditor.com/download 丶 http://ckfinder.com/download

2.百度編輯器的好：是一個專門使用在網頁上屬於開放源代碼的所見即所得文字編輯器。它志於輕量化，不須要太複雜的安裝步驟便可使用。

3.編輯器展現：

4.配置步驟以及一些經常使用配置

1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

2.頁面代碼

    <!--第一個--->
    <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
    <!--第二個--->
    <div id="editorSpace"></div>  <!--直接設置class好像也行的能夠試試--->
    <script type="text/javascript">
        CKEDITOR.appendTo('editorSpace');    </script>

3.配置ckeditor的一些經常使用配置，在config.js這個文件中，全部的屬性配置均可以查閱官方的API：http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

4.列出一些經常使用的屬性配置：

CKEDITOR.editorConfig = function( config )
{    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    //config.width=700;   
    //config.height=400;
    //config.skin='v2';   //自帶皮膚種類有3種：Kama（默認） ， Office 2003 ， v2
   //config.font_names = '宋體;楷體 _GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';



    //若是上傳圖片或者flash則須要，下面配置ckfinder
    var ckfinderPath = "/SomePackage/FCKeditor/ckfinder";  //配置爲絕對路徑   
    config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html";
    config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image";
    config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash";
    config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files";
    config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images";
    config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";
};

5.若是上傳圖片則需在項目中添加ckfinder文件

6.第四步爲配置上傳圖片的第一步

7.改變ckfinder文件夾下的config.ascx,內容以下：

public override bool CheckAuthentication()
    {        //object str = session["username"];        //if (str != null & Convert.ToBoolean(str) == true)        //{        //    return true;        //}
        return true;   //不建議直接返回true，最好作下用戶驗證判斷在返回true（安全）,上面爲驗證的一個實例
    }

8.這樣就好了，因爲ckfinder不是免費的，因此默認狀況下會在上傳頁面中有紅色的廣告提示，雖然不影響使用，但老是以爲不爽。
9.去除廣告方法：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，將其中的 en.call(window,qo);去掉

最後對這個編輯器總結下:很強大，很好用。世界各地都在用的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。