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版本：右击“解决方案资源管理器”的网站根文件夹，选“属性页”，“生成”标签里改。

Ueditor基础使用

标签：

原文地址：http://www.cnblogs.com/wanshi1989/p/4374826.html