原文地址:http://blog.uoolo.com/Article/16
还有在MVC中使用ueditor:http://blog.uoolo.com/Article/111
最初百度了一下“编辑器的选择”,可供选择的也有好多,使用的较多的有ckeditor、kindeditor、markItUp、ueditor等等。
一开始考虑到ckeditor使用者多、项目中也用到过、也是国外开源的一个不错项目,就选择了ckeditor。在使用一段时间后发现ckeditor有很多地方不符合国人的习惯,首行缩进2个汉字,是我最不能忍的一点。还有就是我们经常用到的“插入代码”功能,插入的代码中的符号竟然都被转义了。
而ueditor比较符合我们的使用习惯,以前试用了下,由于起步晚,有很多bug,没有选择他。最近我去ueditor官网看了下,更新到1.2.6.1了,再次试用下,很多bug都修正了。于是乎,现在又用上了他,好,废话结束。下面具体使用方法:
1.下载,官网地址:http://ueditor.baidu.com/website/download.html#ueditor 我下载的.net utf-8的。
2.解压缩后放入到项目中去
3.在你要使用的地方调用吧,首先引用两段js,一个配置,一个ueditor
1 |
< script src = "../Public/ueditor/ueditor.config.js" type = "text/javascript" ></ script > |
2 |
< script src = "../Public/ueditor/ueditor.all.min.js" type = "text/javascript" ></ script > |
4.然后就是对ueditor的初始化,以下代码中的temp是获取数据库内容信息
1 |
< div id = "myEditor" style = "height:500px;" ></ div > |
2 |
< script type = "text/javascript" > |
3 |
var temp = document.getElementById("<%=hd_content.ClientID %>").value; |
4 |
var ue = new baidu.editor.ui.Editor(); |
5 |
ue.render("myEditor"); //这里填写要改变为编辑器的控件id |
6 |
ue.ready(function () { ue.setContent(temp); }) |
5.最后,就是保存数据的方法
1 |
< asp:Button ID = "BtnSave" runat = "server" Text = "保存" onclick = "BtnSave_Click" OnClientClick = "return getContent();" CssClass = "cssbtn" /> |
2 |
< script type = "text/javascript" > |
3 |
function getContent() { |
4 |
var temp = UE.getEditor('myEditor').getContent(); |
6 |
document.getElementById("<%=hd_content.ClientID %>").value = temp; |
附:我使用到的hd_content只是为了中转内容的。放在body的form内就行了。
1 |
< asp:HiddenField ID = "hd_content" runat = "server" Value = "" /> |
总结:1.ueditor现在版本,路径真的不要再配置了,ueditor的开发者都已经做好了,比以前方便很多;2..net版本还要注意上传的问题,有个文件默认编译的,要改成内容(如果你是发布网站),右键该文件属性,就能找到了。
哈哈,ueditor真的不错。