.Net 下 百度 富文本框 Ueditor 的 使用

由于项目中需要使用富文本框，经过权衡比较，最终选择了百度的 Ueditor ,下面把 使用过程简单描述一下

 环境  ：本人使用的 是 Net 下 mvc 模式 开发,多个项目之间使用

版本  1.4.3.2

 

 

1.下载 百度的 编辑器 选择 Asp 版本 ，解压，并把 Ueditor 文件夹放在  web 端 的 Content 的下面，(我的项目 Content 下存放的是 JS , Css， Image 等，你也可以放在 其他位置)

   http://ueditor.baidu.com/website/download.html

2.view  页面代码

使用的方式为   

<script src="~/Content/ueditor/ueditor.config.js"></script>

<script src="~/Content/ueditor/ueditor.all.js"></script>
@*<script src="~/Content/ueditor/ueditor.all.min.js"></script>*@
<link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" />
<script src="~/Content/ueditor/lang/zh-cn/zh-cn.js"></script>


<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({
        UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径
        iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径
        initialContent: '',//初始化编辑器内容
        autoHeightEnabled: true,//高度自动增长
        minFrameHeight: 500//最小高度
    });
    editor.render('editor');

</script>


<texta id="editor" name = "editor"  ><texta>

　头部文件注意引用的顺序，会产生影响

效果如下

 

 

 

3. 使用过程中遇到的一些错误

3.1   界面能出来，但是上传文件 可能 会遇到一些错误

 

有多种原因，可以把 net 下 config.json 的 第一句 注释 去掉

3.2    发现 有 潜在危险的 Request.From 的值

        这时可以关闭验证       [ValidateInput(false)]

 

 

3.3   因为使用的 前端中  有 easyUI, 他和 ueditor 中的 dialog 冲突, ueditor的 弹出框 在 easyui 的 弹出框 下面

 

     尝试了几种从ueditor  入手解决的方法，都没有起作用，所以改为调正 easyUI的Dialog，

     在设置 easyui 的 dialog 的 时候 添加事件 控制 z-index 的值

 $("#Add").dialog({
                bgiframe: true,
                autoOpen: false,
                width: 800,
                height: 450,
                top: 50,
                modal: true,
                shadow: false,
                closed: true,
                onOpen: function () {

                    $(".panel").css("z-index", "900");
                    $(".window-mask").css("z-index", "898");

                },
                onMove: function () {

                    $(".panel").css("z-index", "900");
                    $(".window-mask").css("z-index", "898");

                },
                onResize: function () {
                    $(".panel").css("z-index", "900");
                    $(".window-mask").css("z-index", "898");

                },

　3.4  获取 设置 富文本框中的 内容 

      使用    UE.getEditor('editor').getContent(); 

                UE.getEditor('editor').setContent();

3.5 两个项目 之间 共享 同一 ueditor ，可以 在 服务器 上 iis  设置 虚拟目录，具体 百度

 

3.6  可以看出 当我们 填写完内容时，最终得到的 是 一个 html 内容的 字符串，里面包含了 我们 填写的文字内容 ，图片 以及上传的文件路径，

       如何分离出来 单独的 图片 ，文件 路径， 可以 根据自己你的任务需求，在 ueditor.all.js 里 寻找到  方法 进行 改写