• 百度富文本编辑器ueditor使用总结

    最近做的项目用到了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 plaincopyprint?
    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 plaincopyprint?
    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 plaincopyprint?
    1. //强烈推荐以这种方式进行绝对路径配置  
    2. URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";  
    //强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

    我的配置：

    [javascript] view plaincopyprint?
    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 plaincopyprint?
    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 plaincopyprint?
    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 plaincopyprint?
    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 plaincopyprint?
    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
  • 相关阅读:
    meta标签
    Vue(day8)
    Vue(day7)
    Vue(day6)
    Flex布局
    Vue(day5)
    jquery.data()&jquery.extend()
    Promise对象
    Vue(day4)
    Vue(day3)
  • 原文地址：https://www.cnblogs.com/qingrp-2015930/p/4862230.html
Copyright © 2020-2023  润新知