最近做的项目用到了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.编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下：

  1. <script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>
  2. <!--使用版-->
  3. <!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->
  4. <!--开发版-->
  5. <script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
  6. <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容器，示例代码如下：

  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变量配置编辑器在你项目中的路径。

官网示例：

  1. //强烈推荐以这种方式进行绝对路径配置
  2. URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";
//强烈推荐以这种方式进行绝对路径配置

URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置：

  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. * @author wusuopubupt
  12. * @date 2013-10-24
  13. *
  14. * set window.UMEDITOR_HOME_URL = "/ueditor/";
  15. *
  16. * */
  17. window.UMEDITOR_HOME_URL = "/ueditor/";  //注意就是这里！
  18. var URL = window.UMEDITOR_HOME_URL || (function(){
  19. 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,代码如下

  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，可以看到如下配置：

  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文件，有配置如下：

  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 中修改：

  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. var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),
  9. $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

百度富文本编辑器ueditor使用总结的更多相关文章

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  2. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  3. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  4. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  5. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  6. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  7. Jfinal整合百度富文本编辑器ueditor

    ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...

  8. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  9. 百度富文本编辑器ueditor添加到pom

    <!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifact ...

随机推荐

  1. JDBC连接MySQL数据库

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  2. git 远程 强制合并本地

    反过来,如果希望用代码库中的文件完全覆盖本地工作版本. 方法如下: git reset --hard git pull

  3. park、unpark、ord 函数使用方法(转)

    park,unpark,ord这3个函数,在我们工作中,用到它们的估计不多. 我在最近一个工作中,因为通讯需要用到二进制流,然后接口用php接收.当时在处理时候,查阅不少资料.因为它们使用确实比较少, ...

  4. Windows与Linux下文件操作监控的实现

    一.需求分析: 随着渲染业务的不断进行,数据传输渐渐成为影响业务时间最大的因素.究其原因就是因为数据传输耗费较长的时间.于是,依托于渲染业务的网盘开发逐渐成为迫切需要解决的需求.该网盘的实现和当前市场 ...

  5. Chapter 5 - How to Detect the Collisions

    Chapter 5 - How to Detect the Collisions Our hero can fire bullets now, but the bullets are only vis ...

  6. VC++文件相关操作的函数封装实现

    在开发编译工具中,需要用到文件的相关操作,于是就封装了相关的函数实现: //判断文件是否存在 BOOL FileIsExist(CString strFileName) { CFileFind fin ...

  7. 【bzoj1212】 [HNOI2004]L语言

    题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...

  8. java实现的可以无限级别添加子节点的菜单树

    网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...

  9. 自己做的demo---宣告可以在java世界开始自由了

    package $interface; public interface ILeaveHome { public abstract int a(); public abstract int b(); ...

  10. [上传下载] C#FileUp文件上传类 （转载）

    点击下载 FileUp.zip 主要功能如下 .把上传的文件转换为字节数组 .流转化为字节数组 .上传文件根据FileUpload控件上传 .把Byte流上传到指定目录并保存为文件 看下面代码吧 // ...