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

时间: 2024-10-20 23:56:14

Ueditor基础使用的相关文章

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

初试“七牛云”--零基础运用七牛云配合UEditor实现图片的上传和浏览(.NET篇)

(注册和建立存储空间就不介绍了,网上一把一把的资料,自己试着点点也能明白) 作为一个成熟的菜鸟,如果遇到一个新问题,第一步当然是先百度一下... 看了N个关于七牛云的使用的帖子,表示还是蒙圈的,看懂了一部分,但是不系统,理解的不连贯,作为一个凡是要弄个特别明白的死脑筋,于是开始从头看是研究文档....(以下都是来自http://developer.qiniu.com/article/index.html#quickstart,经过个人精简,如有不明,详情请参阅文档) 先弄明白原理,才能更好的看懂

activiti自定义流程之整合(二):使用angular js整合ueditor创建表单

注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义的表单不谈,通过之前的了解,我们知道一个新的流程开始,是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition),流程定义又依赖于流程模型(model). 我们用到的自定义表单需要在创建模型,画模型图的时候就指定表单的名称formKey,需

多线程基础:两种常见的创建线程的方式

一 通过继承Thread 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 package thread; public class ThreadDemo1 {     public static void main(String[] args) {         Demo1 demo1 = new Demo1("zifangsky");         Demo1 demo2 = new Demo1(

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

百度编辑器UEditor PHP版下载

Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制. Ueditor编辑器划分为了三层架构.其中,核心层为开发者提供了诸如range.selection.domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可

改造百度ueditor字体为rem及相关体会

提到富文本,可能大家都用到过百度的ueditor,作为一个重量级的插件,总结起来一句话,功能很强大,使用很费心.不知道是不是太久没有维护了,ueditor的文档可读性还真是差也可能是悟性不够吧.本文也不是使用教程,只是简单总结一下如何更改字体设置为rem. 一.问题 因为ueditor是pc端的富文本,所以一切字体大小都是以px为单位,但是我们项目需要在移动端来显示,并且移动端的项目都类似淘宝flexible那样做了高清屏幕的适配,这样原原本本的pc上的发布的内容在app上可能就张下面这个样子了

ueditor和thinkphp框架整合修改版

基于tp官网上的一篇文章修改的  因为tp中所有目录其实都是性对于入口文件的 在原来的基础上略做修改后 已经做到 无论项目放在www下的任何位置 图片在编辑器中回填后都能正常显示! http://files.cnblogs.com/files/wordblog/ueditor.zip

activiti自己定义流程之整合(二):使用angular js整合ueditor创建表单

基础环境搭建完成,接下来就该正式着手代码编写了,在说代码之前.我认为有必要先说明一下activit自己定义流程的操作. 抛开自己定义的表单不谈.通过之前的了解,我们知道一个新的流程開始.是在启动流程实例(processIntence)的时候,而流程实例依赖于流程定义(processDefinition).流程定义又依赖于流程模型(model). 我们用到的自己定义表单须要在创建模型,画模型图的时候就指定表单的名称formKey.须要保证这个formKey和我们创建的表单名称一致. 表单并不在创建