集成在ASP中的BaidUEditor u编辑器 网

0.u编辑器简介

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

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

欧盟官方文件地址： http://fex.baidu.com/ueditor/

1.将ueditor包导入到项目中

提取从官方网站下载的开发包，并将其包含在项目中

(注：最新代码基于。必要时使用NETFramework4或更高版本)

提取目录中的文件如下：

Index.html就是一个例子，可以删除。ueditor.config.js中有一些富文本编辑器的设置，建议不要更改，但是在页面中引用时可以设置。如果所有的页面都需要设置，它们可以被写入一个js文件。对话框是单击文本框中的按钮时使用的一些弹出框效果。lang文件夹是与语言相关的设置。目前只有中文和英文，主题文件夹下有一些样式，第三方文件夹下有一些第三方插件，包括代码高亮、屏幕截图等等

我在项目中创建了一个新的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.页面初始化

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

脚本类型='文本/纯文本'/脚本

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

因为富文本编辑器只是一个生成的html代码，我们需要使用Ajax动态加载内容，这比CKEditor更麻烦。使用CKEditor可以直接使用打包的服务器端控件，当然也可以不使用服务器端控件动态加载内容。

首先在加载页面时获取新闻id，然后做ajax查询。查询消息被封装在一个处理程序中，并向这个处理程序发送一个ajax请求。请求参数是新闻id，获取新闻，然后将新闻内容设置为ueditor。

//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用' UE.getEditor('编辑器)就能拿到相关的实例var ue=UE.getEditor('editor '，{ autoheileabled : false })；函数isFocus(e){ alert(UE。geteditor(' editor ').isFocus())；UE。多姆。多穆蒂尔斯。preventdefault(e)}函数设置模糊度。geteditor(' editor ').blur()；UE。多姆。多穆蒂尔斯。preventdefault(e)}函数insertHtml() { var值=prompt('插入超文本标记语言代码', '');' UE.getEditor('编辑器')。execCommand('insertHtml '，值)}函数创建编辑器(){ UE。geteditor(' editor ')；}函数getAllHtml(){返回UE。geteditor(' editor ').getAllHtml()；}函数getContent(){返回UE。geteditor(' editor ').getContent()；}函数getplanetxt(){返回UE。geteditor(' editor ').getPlainTxt()；}函数setContent(isAppendTo){ UE。geteditor(' editor ').setContent(' '，isAppendTo)；}函数getText() { //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容var范围=UE。geteditor(' editor ')。选择。getrange()；范围。select()；返回UE。geteditor(' editor ')。选择。gettext()；}函数getContentTxt(){返回UE。geteditor(' editor ').getContentTxt()；}函数hasContent(){返回UE。geteditor(' editor ').具有内容()；}函数setFocus(){ UE。geteditor(' editor ').焦点();}函数删除编辑器(){ UE。geteditor(' editor ').销毁();}函数getLocalData(){ alert(UE。geteditor(' editor ').exec命令(' getlocaldata ')；}函数clearLocalData(){ UE。geteditor(' editor ').exec命令(' clearlocaldata ')；警报('已清空草稿箱')}以上所述就是本文的全部内容了，希望大家能够喜欢。