.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 里 寻找到 方法 进行 改写