由于项目中需要使用富文本框,经过权衡比较,最终选择了百度的 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, 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 里 寻找到 方法 进行 改写