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

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

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

    1.0 找到 net 文件夹下面的 web.config 配置文件,注释掉如下的两句: 2.0 Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功. 3.0 删除 im ...

  2. asp.net中使用ueditor 1.3.6上传图片问题

    在asp.net中使用ueditor 1.3.6版本上传图片时,出现上传成功但是,图片无法正常显示的问题,解决方法如下: 只需要将imageUp.ashx中的info = up.upFile(cont ...

  3. KindEditor编辑器在ASP.NET中的使用

    KindEditor编辑器在ASP.NET中的使用 最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEdit ...

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

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  5. asp.net中ashx生成验证码代码放在Linux(centos)主机上访问时无法显示问题

    最近有个项目加入了验证码功能,就从自己博客以前的代码中找到直接使用,直接访问验证码页面报错如下: 源代码:asp.net中使用一般处理程序生成验证码 Application Exception Sys ...

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

    1. sessionState的4种mode模式 在ASP.NET中Session的sessionState的4中mode模式:Off.InProc.StateServer及SqlServer. 2. ...

  7. Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值

    Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...

  8. ASP.NET中后台数据和前台控件的绑定

    关于ASP.NET中后台数据库和前台的数据控件的绑定问题 最近一直在学习个知识点,自己创建了SQL Server数据库表,想在ASP.NET中连接数据库,并把数据库中的数据显示在前台,注意,这里的数据 ...

  9. asp.net中缓存的使用介绍一

    asp.net中缓存的使用介绍一 介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的c ...

随机推荐

  1. java.lang.NullPointerException

    你妹的这是什么错误啊? Errors occurred during the build. Errors running builder 'Android Resource Manager' on p ...

  2. osgi: HttpService A null service reference is not allowed.

    最近在学习osgi,在练习HttpService的过程中,一直出现“A null service reference is not allowed”这样的报错,代码本身没有问题,在网上也搜了不少地方, ...

  3. 获取ACCESS数据库中自增变量的值

    /// <summary> /// 获取自增变量值 /// </summary> /// <returns>自增变量值</returns> public ...

  4. Windows 10 Weather App无法正常显示解决方法

    Weather动态磁贴显示Washington(不知是否和我的region设置有关系),打开应用却停留在输入需要搜索的天气.根据提示输入"Shanghai, China"并单击搜索 ...

  5. Cocoa Drawing Guide学习part1——基础和图形上下文 (转)

    原文:http://noark9.github.io/2013/12/28/cocoa-drawing-guide-study-part-1/ 简介 cocoa drawing由AppKit提供并且也 ...

  6. ruby -- 进阶学习(四)paperclip上传中文命名图片

         Paperclip -- 上传中文命名图片 使用Paperclip和ImageMagick插件来处理图片的时候,上传非中文命名的图片时,只要把配置写好就没问题 if you need to ...

  7. debian7.1 sources.list

    deb http://mirrors.163.com/debian wheezy main non-free contribdeb http://mirrors.163.com/debian whee ...

  8. iOS-微信-分享

    一.微信原生的分享--准备工作. 1. 需要申请微信AppId. 2. 导入系统架包. SDK文件包括 libWeChatSDK.a,WXApi.h,WXApiObject.h,WechatAuthS ...

  9. FUNCS.H中的函数声明

    /***************************************************************************                         ...

  10. SQL Server 2012:SQL Server体系结构——一个查询的生命周期(第1部分)

    为了缩小读取操作所涉及范围,本文首先着眼于简单的SELECT查询,然后引入执行更新操作有关的附加过程.最后你会读到,优化性能时SQLServer使用还原工具的相关术语和流程. 关系和存储引擎 如图所示 ...