ASP.NET中UEditor使用

0.ueditor简介

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。

UEditor官网:http://ueditor.baidu.com/website/index.html

UEditor官方文档地址: http://fex.baidu.com/ueditor/

1.将ueditor包导入项目

将从官网上下载的开发包解压后包含到项目中

(注:最新的代码需要时基于.NETFramework4以上)

解压后目录下文件如下:

index.html 是一个示例文件、可以删去,ueditor.config.js中是一些富文本编辑器的设置,建议不要改动,可以在页面中引用的时候设置,如果所有页面都需要设置可以写在一个js文件中,dialogs是在文本框中点击按钮时用到的一些弹出框效果,lang文件夹下是语言相关的设置,目前只有中文与英文,themes文件夹下是一些样式,third-party文件夹下是一些第三方的插件,有代码高亮,截屏等

我在我的项目中新建了一个ueditorHelper.js文件,在文件中定义了一些ueditor常用的方法,以及对于ueditor的一些设置

在net目录下,我们只保留controller.ashx与config.json就可以了,同时把App_Code中的代码拷贝到项目中的App_Code中,同时添加对bin目录下Json.NET程序集的引用,config.json文件定义了一些设置,配置上传文件的一些要求以及上传到服务器保存的路径,在web.config文件中可以看到项目框架应至少为4.0

2.在页面中添加js引用,在页面中引用

添加zh-cn.js文件是要设置语言,防止自动识别语言错误而导致语言适配错误,UEditorHelper.js文件是一些常用的方法和编辑器设置的封装,查看index.html的源代码,在其中有一段js代码

自定义的UEditorHelper.js文件中使用到了一些方法,并对第一行代码进行了修改,进行 ueditor富文本编辑器的设置

3.页面初始化

在需要添加富文本编辑器的地方加入以下代码:

<script id="editor" type="text/plain"></script>

4.编辑内容时,页面的加载(ajax加载内容)

因为富文本编辑器只是生成的一段html代码,我们需要利用Ajax动态加载内容,相比CKEditor来说,这是比较麻烦的地方,使用CKEditor可以直接使用封装好的服务器端控件,当然也可以不用服务器端控件利用Ajax动态加载内容。

首先在页面加载时获取到新闻的id,然后再进行ajax查询,查询新闻封装在了一个handler中,向这个handler发起ajax请求,请求参数为新闻id,获取新闻,获取到之后,把新闻的内容设置给ueditor

 1 //实例化编辑器
 2 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(‘editor‘)就能拿到相关的实例
 3 var ue = UE.getEditor(‘editor‘,{autoHeightEnabled: false});
 4 function isFocus(e) {
 5     alert(UE.getEditor(‘editor‘).isFocus());
 6     UE.dom.domUtils.preventDefault(e)
 7 }
 8 function setblur(e) {
 9     UE.getEditor(‘editor‘).blur();
10     UE.dom.domUtils.preventDefault(e)
11 }
12 function insertHtml() {
13     var value = prompt(‘插入html代码‘, ‘‘);
14     UE.getEditor(‘editor‘).execCommand(‘insertHtml‘, value)
15 }
16 function createEditor() {
17     UE.getEditor(‘editor‘);
18 }
19 function getAllHtml() {
20     return UE.getEditor(‘editor‘).getAllHtml();
21 }
22 function getContent() {
23     return UE.getEditor(‘editor‘).getContent();
24 }
25 function getPlainTxt() {
26     return UE.getEditor(‘editor‘).getPlainTxt();
27 }
28 function setContent(isAppendTo) {
29     UE.getEditor(‘editor‘).setContent(‘‘, isAppendTo);
30 }
31 function getText() {
32     //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
33     var range = UE.getEditor(‘editor‘).selection.getRange();
34     range.select();
35     return UE.getEditor(‘editor‘).selection.getText();
36 }
37 function getContentTxt() {
38     return UE.getEditor(‘editor‘).getContentTxt();
39 }
40 function hasContent() {
41     return UE.getEditor(‘editor‘).hasContents();
42 }
43 function setFocus() {
44     UE.getEditor(‘editor‘).focus();
45 }
46 function deleteEditor() {
47     UE.getEditor(‘editor‘).destroy();
48 }
49 function getLocalData() {
50     alert(UE.getEditor(‘editor‘).execCommand("getlocaldata"));
51 }
52 function clearLocalData() {
53     UE.getEditor(‘editor‘).execCommand("clearlocaldata");
54     alert("已清空草稿箱")
55 }

UEditorHelper

时间: 2024-08-02 11:29:38

ASP.NET中UEditor使用的相关文章

asp.net 中 UEditor 图片上传失败的处理方法

1.0 找到 net 文件夹下面的 web.config 配置文件,注释掉如下的两句: 2.0 Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功. 3.0 删除 imageUp.ashx 中的 <%@ Assembly Src="Uploader.cs" %> asp.net 中 UEditor 图片上传失败的处理方法

asp.ne中使用ajax和controller进行通信问题记录

为了页面显示和后端处理分离,使用了html+ajax+mvc的形式进行处理. 在这其中遇到的问题记录: 1. 在使用ajax向controller请求数据的时候,"get"方法会缓存上一次的请求,导致controller方法不能被debug跟踪到,开始以为是vs出错了,到后来才搞清楚. 解决方法:请求controller路径时加上随机数,或者使用"post"方法. 2. 在使用"POST"方法时,IE11要小心处理,因为ie会出现怎么都执行不了的

ASP.NET中的几种分页

1.通过DataGrid控件实现分页 ASP.NET中的DataGrid控件自带了分页功能,当绑定了DataGrid的数据源之后,须要对DataGrid控件进行一些设置: 左击控件右上角的小箭头→属性生成器: 选择左边的[分页]选项卡 选中[同意分页].[页大小]表示一页显示多少条数据:导航button的[位置]有顶.底.上下型三种选择.[模式]有页码和"上一页.下一页button".假设选择了页码模式.[数值button]表示最多显示的button数量,假设选择了还有一种模式,&qu

asp.net中session的原理及应用

Session简介丶特性 1.Session是一种Web会话中的常用状态之一. 2.Session提供了一种把信息保存在服务器内存中的方式.他能储存任何数据类型,包含自定义对象. 3.每个客户端的Seesion是独立存储的. 4.在整个会话过程中,只要SessionID的cookie不丢失,都会保存Session信息的. 5.Session不能跨进程访问,只能由该会话的用户访问.应为提取Session数据的id标识是以Cookie的方式保存到访问者浏览器的缓存里的. 6.当会话终止,或过期时,服

asp.net中javascript与后台c#交互

asp.net中javascript与后台c#交互 作者:熊猫大叔 字体:[增加 减小] 类型:转载 时间:2015-10-23我要评论,出处:http://www.jb51.net/article/73793.htm 这篇文章主要介绍了asp.net中javascript与后台c#交互,需要的朋友可以参考下 最近做一个小项目,网页中嵌入google maps,输入经纬度坐标可以定位地图位置并加注标记,点击标记获取远端摄像头数据并在视频窗口实现播放.在实际操作过程中,由于经纬度数据和视频登录的用

ASP.NET中Session的sessionState 4种mode模式

1. sessionState的4种mode模式 在ASP.NET中Session的sessionState的4中mode模式:Off.InProc.StateServer及SqlServer. 2. Off模式 <sessionState mode="Off"></sessionState> 关闭模式,即不需要使用Session. 单个页面关闭Session: <%@ Page EnableSessionState="false" %

ASP.NET中常用的优化性能的方法

1. 数据库访问性能优化  数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池(Connection Pool)改善打开和关闭数据库对性能的影响.系统将用户的数据库连接放在连接池中,需要时取出,关闭时收回连接,等待下一次的连接请求. 连接池的大小是有限的,如果在连接池达到最大限度后仍要求创建连接,必然大大影响性能.因此,在建立数据库连接后只有在真正需要操作时才打开连接,使用完

ASP.NET中的&lt;%%&gt;介绍

一.主要用于ASP.NET前台绑定用的最多: <%#Eval("")%> <%#Bind("")%> <%=变量%> 1.<%#Eval("数据列")%>主要用于需要进行更改的数据列 如:需要将<%Eval("性别")%>=1:将1转换成女. 首先在.CS文件中定义一个方法: 1 public object ChangeSex(object obj) 2 { 3 if

ASP.NET中Cookie跨域的问题及解决代码

ASP.NET中Cookie跨域的问题及解决代码 http://www.liyumei.net.cn/post/share18.html Cookies揭秘  http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html 最近在项目开发中遇到一个很棘手的问题,一个用户在顶级域名登录后,跳转到自己所拥有的二级域名下管理二级网站时,cookie丢失了,一直找解决办法找了整整两天,百度谷歌一大堆,