码迷,mamicode.com
首页 > 其他好文 > 详细

Ueditor基础使用

时间:2015-03-28 21:40:54      阅读:483      评论:0      收藏:0      [点我收藏+]

标签:

感谢大家对我这个菜鸟的帮助,这是我第一次用.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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!