碼上歡樂
相關內容    簡體    繁體

百度富文本編輯器ueditor使用總結

本文轉載自   查看原文   2015-10-08 20:46   2062 

最近做的項目用到了ueditor這個東東，但是他的一些配置文檔對初次使用者來說很難以理解，故作此總結

 

相關詳細操作鏈接地址：

http://blog.csdn.net/wusuopubupt/article/details/13019657

http://cache.baiducontent.com/c?m=9d78d513d9d441d84fece4225a50c0676943f0612ba1db020fd0843999735a315016e4ac56240705a3d20c6d16df394beb802103401451b18cb88b5dadcc85295f9f5737676b845662a20edcbd5124b137e15efedb1cf0bb8025e2a5c5a2ab4323cc44760a97f1fb4d7162dd1f810340e7b1ea39025e60ad9c3b728853605f9b3431b753bea06c615dc7b09f4b4db037cd2454d2b835c76f58fe42fa584b3344d71ded150d3b36e44823fa59&p=9e70c216d9c111a05bed926d540acb&newp=8162c3148b904ead42bd9b7d0d1091231610db2151d1ca&user=baidu&fm=sc&query=%2Enet%B0%D9%B6%C8%B5%C4%B8%BB%CE%C4%B1%BE%B1%E0%BC%AD%C6%F7%C9%CF%B4%AB%CD%BC%C6%AC%C9%E8%D6%C3&qid=8d0f81ef00016c7f&p1=18

http://www.tzwhx.com/NewShow/newBodyShow/AJAX_35873.html

 

百度富文本編輯器ueditor使用所有 操作方法：在下載的文檔中的index.html中

 

 

1.ueditor 官方地址：http://ueditor.baidu.com/website/index.html

   開發文檔地址：http://ueditor.baidu.com/website/document.html

   下載地址：http://ueditor.baidu.com/website/download.html （這里可選開發版，或MINI版）

 

2. 從官網上下載完整源碼包，解壓到任意目錄，解壓后的源碼目錄結構如下所示：

     _examples：編輯器完整版的示例頁面

    dialogs：彈出對話框對應的資源和JS文件

    themes：樣式圖片和樣式文件   php/jsp/.net：涉及到服務器端操作的后台文件，根據你選擇的不同后台版本，這里也會不同，這里我們選擇php

    third-party：第三方插件(包括代碼高亮，源碼編輯等組件）

    editor_all.js：_src目錄下所有文件的打包文件（用於發布版本）

    editor_api.js: API接口配置文件（開發版本）

    editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時才采用

    editor_config.js：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄

 

3.編輯器的實例化頁面，導入編輯器需要的三個入口文件，示例代碼如下：

 

[javascript] view plain copy print ?
  1. <script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>  
  2.   
  3.     <!--使用版-->  
  4.     <!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->  
  5.   
  6.     <!--開發版-->  
  7.     <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>  
  8.     <script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>  
<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>

    <!--使用版-->
    <!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->

    <!--開發版-->
    <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
    <script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>

 

 

4.然后在編輯器的實例化頁面中創建編輯器實例及其DOM容器，示例代碼如下：

 

[javascript] view plain copy print ?
  1. <textarea name="后台取值的key" id="myEditor">這里寫你的初始化內容</textarea>  
  2. <script type="text/javascript">  
  3.     var editor = new UE.ui.Editor();  
  4.     editor.render("myEditor");  
  5.     //1.2.4以后可以使用一下代碼實例化編輯器  
  6.     //UE.getEditor('myEditor')  
  7. </script>  
<textarea name="后台取值的key" id="myEditor">這里寫你的初始化內容</textarea>
<script type="text/javascript">
    var editor = new UE.ui.Editor();
    editor.render("myEditor");
    //1.2.4以后可以使用一下代碼實例化編輯器
    //UE.getEditor('myEditor')
</script>

5.在editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

 

官網示例：

 

[javascript] view plain copy print ?
  1. //強烈推薦以這種方式進行絕對路徑配置  
  2. URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";  
//強烈推薦以這種方式進行絕對路徑配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置：

 

 

[javascript] view plain copy print ?
  1. (function () {  
  2.     /** 
  3.      * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面為當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。 
  4.      * 鑒於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。 
  5.      * "相對於網站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/umeditor/"這樣的路徑。 
  6.      * 如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。 
  7.      * 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等於對應的配置。 
  8.      * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/"; 
  9.      */  
  10.       
  11.     /** 
  12.      * @author wusuopubupt 
  13.      * @date 2013-10-24 
  14.      *  
  15.      * set window.UMEDITOR_HOME_URL = "/ueditor/"; 
  16.      *  
  17.      * */  
  18.     window.UMEDITOR_HOME_URL = "/ueditor/";  //注意就是這里！  
  19.       
  20.     var URL = window.UMEDITOR_HOME_URL || (function(){  
  21.   
  22.         function PathStack() {  
(function () {
    /**
     * 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面為當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。
     * 鑒於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。
     * "相對於網站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/umeditor/"這樣的路徑。
     * 如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。
     * 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等於對應的配置。
     * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
	
	/**
	 * @author wusuopubupt
	 * @date 2013-10-24
	 * 
	 * set window.UMEDITOR_HOME_URL = "/ueditor/";
	 * 
	 * */
	window.UMEDITOR_HOME_URL = "/ueditor/";  //注意就是這里！
	
    var URL = window.UMEDITOR_HOME_URL || (function(){

        function PathStack() {

6.如果用editor_api.js （也就是不用editor.all.js）開發時,打開editor_api.js,代碼如下

 

 

[javascript] view plain copy print ?
  1. /** 
  2.  * 開發版本的文件導入 
  3.  */  
  4. (function (){  
  5.     var paths  = [  
  6.             'editor.js',  
  7.             'core/browser.js',  
  8.             'core/utils.js',  
  9.             'core/EventBase.js',  
  10.             'core/dtd.js',  
  11.             'core/domUtils.js',  
  12.             'core/Range.js',  
  13.             'core/Selection.js',  
  14.             'core/Editor.js',  
  15.             'core/filterword.js',  
  16.             'core/node.js',  
  17.             'core/htmlparser.js',  
  18.             'core/filternode.js',  
  19.             'plugins/inserthtml.js',  
  20.             'plugins/image.js',  
  21.             'plugins/justify.js',  
  22.             'plugins/font.js',  
  23.             'plugins/link.js',  
  24.             'plugins/print.js',  
  25.             'plugins/paragraph.js',  
  26.             'plugins/horizontal.js',  
  27.             'plugins/cleardoc.js',  
  28.             'plugins/undo.js',  
  29.             'plugins/paste.js',  
  30.             'plugins/list.js',  
  31.             'plugins/source.js',  
  32.             'plugins/enterkey.js',  
  33.             'plugins/preview.js',  
  34.             'plugins/basestyle.js',  
  35.             'plugins/video.js',  
  36.             'plugins/selectall.js',  
  37.             'plugins/removeformat.js',  
  38.             'plugins/keystrokes.js',  
  39.             'plugins/dropfile.js',  
  40.             'ui/widget.js',  
  41.             'ui/button.js',  
  42.             'ui/toolbar.js',  
  43.             'ui/menu.js',  
  44.             'ui/dropmenu.js',  
  45.             'ui/splitbutton.js',  
  46.             'ui/colorsplitbutton.js',  
  47.             'ui/popup.js',  
  48.             'ui/scale.js',  
  49.             'ui/colorpicker.js',  
  50.             'ui/combobox.js',  
  51.             'ui/buttoncombobox.js',  
  52.             'ui/modal.js',  
  53.             'ui/tooltip.js',  
  54.             'ui/tab.js',  
  55.             'ui/separator.js',  
  56.             'ui/scale.js',  
  57.             'adapter/adapter.js',  
  58.             'adapter/button.js',  
  59.             'adapter/fullscreen.js',  
  60.             'adapter/dialog.js',  
  61.             'adapter/popup.js',  
  62.             'adapter/imagescale.js',  
  63.             'adapter/autofloat.js',  
  64.             'adapter/source.js',  
  65.             'adapter/combobox.js'  
  66.         ],  
  67.         /** 
  68.          * @author wusuopubupt 
  69.          * @date 2013-10-24 
  70.          *  
  71.          * modified  baseURL = '/ueditor/src/';  
  72.          */  
  73.         baseURL = '/ueditor/src/';   
  74.     for (var i=0,pi;pi = paths[i++];) {  
  75.         document.write('<script type="text/javascript" src="'+ baseURL + pi +'"></script>');  
  76.     }  
  77. })();  
/**
 * 開發版本的文件導入
 */
(function (){
    var paths  = [
            'editor.js',
            'core/browser.js',
            'core/utils.js',
            'core/EventBase.js',
            'core/dtd.js',
            'core/domUtils.js',
            'core/Range.js',
            'core/Selection.js',
            'core/Editor.js',
            'core/filterword.js',
            'core/node.js',
            'core/htmlparser.js',
            'core/filternode.js',
            'plugins/inserthtml.js',
            'plugins/image.js',
            'plugins/justify.js',
            'plugins/font.js',
            'plugins/link.js',
            'plugins/print.js',
            'plugins/paragraph.js',
            'plugins/horizontal.js',
            'plugins/cleardoc.js',
            'plugins/undo.js',
            'plugins/paste.js',
            'plugins/list.js',
            'plugins/source.js',
            'plugins/enterkey.js',
            'plugins/preview.js',
            'plugins/basestyle.js',
            'plugins/video.js',
            'plugins/selectall.js',
            'plugins/removeformat.js',
            'plugins/keystrokes.js',
            'plugins/dropfile.js',
            'ui/widget.js',
            'ui/button.js',
            'ui/toolbar.js',
            'ui/menu.js',
            'ui/dropmenu.js',
            'ui/splitbutton.js',
            'ui/colorsplitbutton.js',
            'ui/popup.js',
            'ui/scale.js',
            'ui/colorpicker.js',
            'ui/combobox.js',
            'ui/buttoncombobox.js',
            'ui/modal.js',
            'ui/tooltip.js',
            'ui/tab.js',
            'ui/separator.js',
            'ui/scale.js',
            'adapter/adapter.js',
            'adapter/button.js',
            'adapter/fullscreen.js',
            'adapter/dialog.js',
            'adapter/popup.js',
            'adapter/imagescale.js',
            'adapter/autofloat.js',
            'adapter/source.js',
            'adapter/combobox.js'
        ],
        /**
         * @author wusuopubupt
         * @date 2013-10-24
         * 
         * modified  baseURL = '/ueditor/src/'; 
         */
        baseURL = '/ueditor/src/'; 
    for (var i=0,pi;pi = paths[i++];) {
        document.write('<script type="text/javascript" src="'+ baseURL + pi +'"></script>');
    }
})();

可以看到，這里有一項：baseURL，就是JS文件的路由，這里要根據ueditor_api.js文件的實際路徑去配置！        7.文件上傳問題：

 

打開ueditor.config.js，可以看到如下配置：

 

[javascript] view plain copy print ?
  1. //圖片上傳配置區  
  2.        ,imageUrl:URL+"php/imageUp.php"             //圖片上傳提交地址  
  3.        //,imagePath:URL + "php/"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置  
  4.        ,imagePath:"http://test.mathandcs.com/"  
  5.        ,imageFieldName:"upfile"                   //圖片數據的key,若此處修改，需要在后台對應文件修改對應參數  
 //圖片上傳配置區
        ,imageUrl:URL+"php/imageUp.php"             //圖片上傳提交地址
        //,imagePath:URL + "php/"                     //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imagePath:"http://test.mathandcs.com/"
        ,imageFieldName:"upfile"                   //圖片數據的key,若此處修改，需要在后台對應文件修改對應參數

這里的imageURL是圖片上傳所調用的php文件的地址，而imagePath則是為新上傳的圖片生成的圖片地址的host部分；

 

再打開ueditor/php/下的imageUp.php文件，有配置如下：

 

[php] view plain copy print ?
  1. $config = array(  
  2.         "savePath" => "/var/www/store/upload/" ,             //存儲文件夾  
  3.         "maxSize" => 1000 ,                   //允許的文件最大尺寸，單位KB  
  4.         "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允許的文件格式  
  5.     );  
  6.     //上傳文件目錄  
  7.     //$Path = "upload/";  
  8.     $Path = "/var/www/store/upload/";  
$config = array(
        "savePath" => "/var/www/store/upload/" ,             //存儲文件夾
        "maxSize" => 1000 ,                   //允許的文件最大尺寸，單位KB
        "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允許的文件格式
    );
    //上傳文件目錄
    //$Path = "upload/";
    $Path = "/var/www/store/upload/";

   這里需要把上傳文件到服務器的目的地址（上傳文件保存文件）savePath修改成你指定的文件地址。

 

由於相對路徑和絕對路徑的問題，生成的地址有可能是錯的，這時就要hack一下生成圖片URL的JS文件：

ueditor/dialogs/image/image.js 中修改：

 

[javascript] view plain copy print ?
  1. /** 
  2.                  * @author wusuopubupt 
  3.                  * @date 2013-10-24 
  4.                  * @return url modified 
  5.                  * */  
  6.                 var reg = /\/var\/www\/test\/upload\//;  
  7.                 url = url.replace(reg,"");  
  8.                   
  9.                 var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),  
  10.                     $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);  
/**
                 * @author wusuopubupt
                 * @date 2013-10-24
                 * @return url modified
                 * */
                var reg = /\/var\/www\/test\/upload\//;
            	url = url.replace(reg,"");
            	
                var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
                    $item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

這里的正則的規則要根據具體情況來定！

 

 

至此，Ueditor便在我的環境中配置成功了。

 

但是一般新手會報以下三個錯  注意注意注意 重要的事說三編

一：未能加載文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed”或它的某一個

解決方案：將項目中Newtonsoft.Json替換成最新的Newtonsoft.Json

二： Current JsonReader item is not an object: Comment. Path '', line 1, position 28.   這是個坑爹的錯誤

解決：

打開Json校驗網：http://jsonlint.com/

把config.json內容全部粘過去，發現其頭部 “/* 前后端通信相關的配置,注釋只允許使用多行方式 */”這段注釋導致了Json格式錯誤！趕緊刪除，錯誤消失！

三：會報你傳過去的Ueditor中檢測到與潛有危險的request.form,原因你值中包含特殊字符

最好的方法：是在控制器前加：[ValidateInput(false)] 則可解決

次方法：

這種問題是因為你提交的Form中有HTML字符串，例如你在TextBox中輸入了html標簽，或者在頁面中使用了HtmlEditor組件等，解決辦法是禁用validateRequest。

如果你是.net 4.0或更高版本，一定要看方法3。

此方法在asp.net webForm和MVC中均適用 方法1：

在.aspx文件頭中加入這句：

<%@ Page validateRequest="false"  %>

  方法2：

修改web.config文件:

<configuration>     <system.web>         <pages validateRequest="false" />     </system.web> </configuration>

因為validateRequest默認值為true。只要設為false即可。

  方法3：

web.config里面加上

<system.web>     <httpRuntime requestValidationMode="2.0" /> </system.web>

因為4.0的驗證在HTTP的BeginRequest前啟用，因此，請求的驗證適用於所有ASP.NET資源，aspx頁面,ashx頁面,Web服務和一些HTTP處理程序等.

 

一些問題收集：

監聽的方式來監聽內容改變：

var ue = UE.getEditor('editor');
ue.addListener("contentChange",formatInput);

function formatInput(){
var text=ue.getPlainTxt();
ue.setContent("

"+text+"

", false);
UE.dom.domUtils.preventDefault(e);
}

ue.addListener("beforeSetContent",function (){
ue.removeListener("contentChange",formatInput);
});

ue.addListener("afterSetContent",function (){
ue.addListener("contentChange",formatInput);
});

我嘗試在用戶輸入的同時格式化他們的輸入內容（以上只是示例代碼），當用戶輸入的同時我監聽change事件，然后獲取內容，修改后寫回去。但是寫 回去的時候會再次觸發contentChange事件。於是我寫了以上的代碼，但是並沒有起作用。有沒有辦法阻止setContent觸發 contentChange事件？

 

更多問題或解決方案看官方論壇：https://github.com/fex-team/ueditor/issues?page=8&q=is%3Aissue+is%3Aopen

 

更多詳細的文檔請參考ueditor官網DOC：http://ueditor.baidu.com/website/document.html

 


免責聲明！

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



猜您在找 百度富文本編輯器ueditor使用總結 使用百度的富文本編輯器UEditor遇到的問題總結 百度富文本編輯器ueditor使用總結 Ueditor百度富文本編輯器 百度ueditor富文本編輯器的使用 tp5引入ueditor(百度的富文本編輯器)的使用 reactjs 中使用百度Ueditor富文本編輯器 vue項目中使用百度富文本編輯器ueditor Jfinal整合百度富文本編輯器ueditor Django集成百度富文本編輯器uEditor
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM