[转载]百度免费的文本编辑器Ueditor的使用说明
感谢大家对我这个菜鸟的帮助,这是我第一次用.NET做网站。在这里向大家推荐个百度免费的文本编辑器Ueditor,是.NET版的,在http://ueditor.baidu.com/website/index.html可以下载。官网上也有简单的教程,看着费劲很蛋疼。
然后我花了一天多的时间研究出了它在数据控件里的用法,高手们不要见笑啊,都是我自己实验出来的:如下:
部署说明:
1、拷贝源码包中的dialogs、themes、net、third-party、editor_all.js和editor_config.js到ueditor文件夹中。
2、在ueditor文件夹里的editor_config.js里设置绝对路径:
把
URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("/")+1).replace("_examples/","").replace("website/","");
改成
URL= window.UEDITOR_HOME_URL||"/ueditor/";
3、加入文件头,注意次序不要错:
<script type="text/javascript" src="/ueditor/editor_config.js"></script>
< script type="text/javascript" src="/ueditor/editor_all.js"></script>
< link rel="stylesheet" href="/ueditor/themes/default/ueditor.css">
4、加入实体,其中div或者textarea是实例,script是引用语句。
<div id="myEditor" style="width:800px;"></div>
< script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
< /script>
可以在div或textarea中加name属性,以改变传值变量名,覆盖默认变量名,在一页里引用多个实例时用,如下:
<textarea id="myEditor" style="width:800px;" name="myContent"></textarea>
< script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
< /script>
5、传值到数据库:
默认传值变量为editorValue,这个可以在editor_config.js文件里的textarea:后面修改。
◆如果不放在控件里:后端可以用Request.Form["editorValue"]来获取,这个值只能由有提交功能的按钮来提取。
◆用FormView控件实现插入功能:
①在<InsertItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
<textarea id="myEditor" style="width:800px;" ></textarea>
< script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor");
< /script>
②在<InsertItemTemplate>的底端,一定要把<asp:LinkButton ...的提交按钮改换成<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="确定新增" />
③在此FormView的数据源<asp:SqlDataSource里的<InsertParameters>里:
把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="editorValue" Name="newsContent" Type="String" />
◆用ListView控件实现插入功能:
①在<InsertItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
<textarea id="myEditor1" name="insertEditorValue" style="width:800px;" ></textarea>
< script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor1");
< /script>
关键点:textarea一定要加上name属性以防止和编辑模块中的传值参数起冲突;
textarea的id也要和编辑模块的有区别,但要和render("的id保持一致。
②在此ListView的数据源<asp:SqlDataSource里的<InsertParameters>里:
把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="insertEditorValue" Name="newsContent" Type="String" />
◆用ListView控件实现编辑功能:
①首先要打开ueditor目录下的editor_config.js文件,设置,autoClearinitialContent:false否则一点鼠标内容就消失了。
②在<EditItemTemplate>里把<asp:TextBox Text='<%# Bind("newsContent") %>' ...什么的替换成:
<textarea id="myEditor2" name="editEditorValue" style="width:800px;"><asp:Label ID="Label1" runat="server" Text='<%# Eval("newsContent") %>'></asp:Label></textarea>
< script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
editor.render("myEditor2");
< /script>
③在此ListView的数据源<asp:SqlDataSource里的<UpdateParameters>里:
把<asp:Parameter Name="newsContent" Type="String" />改成<asp:FormParameter FormField="editEditorValue" Name="newsContent" Type="String" />
6、常见问题解决:
图片上传不成功?
由于目前官方提供的最新的.NET 1.2.1.0版本 是.Net FrameWork 4.0 ,所以如果在你的项目里是是.Net FrameWork 3.5
请做如下修改:
删除官方下的.Net/web.config,(只用vs自动生成的web.config就可以了)
这样就没有问题了。
或者修改你网站的.NET版本:右击“解决方案资源管理器”的网站根文件夹,选“属性页”,“生成”标签里改。