百度UEditor基本使用

摘要:
3查看demo.html。首先导入和导入三个配置文件//请注意,不能更改顺序。请在代码中创建一个编辑器容器。此容器是一个//建议设置样式。脚本标记是编辑器的容器。我们的内容显示在这里。创建另一个脚本标记,编写js代码,将编辑器的代码初始化为varue=UE.getEditor;将编辑器容器id的新页面保存在单引号中,您可以看到最简单的编辑器演示etEditor;functionGetEditor(){if{editor=UE.get editor;}returneditor;}//将来,您可以直接使用GetEditor方法获取editr对象。

1 首先奉上链接其http://ueditor.baidu.com/website/index.html 更多更详细内容在其官方api上,本文只是一个归类总结性文章。

2 下载链接http://ueditor.baidu.com/website/download.html  本人是.net开发人员就直接下载了最新的.net版本,可以直接把下载好的代码直接放到项目中(需要注意的是,它里面有后代ashx代码,需要添加其中bin目录下的Json.net)。

3 看demo.html

首先导入导入三个配置文件

<script type="text/javascript" charset="utf-8" src="http://t.zoukankan.com/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="http://t.zoukankan.com/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://t.zoukankan.com/lang/zh-cn/zh-cn.js"></script>//此处注意顺序不能变

在代码中创建一个编辑器容器 此容器为一个 <scriptid="container"name="content"type="text/plain" style="1024px;height:500px;"> </script>//建议设置样式,

这个script标签就是ueditor的容器我们内容就是在这里面显示的

再创建一个script标签写js代码 

初始化ueditor的代码为  var ue = UE.getEditor('editor');此出单引号里面的为编辑器容器id 保存刷新页面就可以看到最简单的editor的demo了。

4 介绍一下Editor的常用方法

本人喜欢无论获取对象用工厂模式 

var editor = UE.getEditor('lxt');
function GetEditor() {
if (editor==null||editor==undefined) {
editor = UE.getEditor('lxt');
}
return editor;
}//以后获取ediotr 对象直接用GetEditor方法就行了。

1)获取编辑器里面的内容(html代码): GetEditor().getContent();

2)设置编辑器里面的内容(支持html代码): GetEditor().setContent("李啸天", boolean是否追加);

3)获取编辑器里面的纯文本: GetEditor().getContentTxt();

4)获取编辑器带格式的纯文本(也就是包含一些<img>等标签的文本,但是不包含文本的格式,上一个方法不包含<ima>等标签): GetEditro()..getPlainTxt();

5)判断编辑器是否有内容返回true或者false GetEditor().hasContents();

6)使编辑器获取焦点:  GetEditor().focus();

7)判断编辑器是否获取焦点 :GetEditor().isFocus();

8)使编辑器失去焦点:GetEditor().blur();

9)获取编辑器选中的文本:可以封装为一个方法,具体代码的意思可以看一下百度api链接为 http://ueditor.baidu.com/doc/#UE.dom.Range:select()

function getText() {
//当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = UE.getEditor('editor').selection.getText();
alert(txt)
}

10)使编辑器不可编辑:GetEditor().setDisabled();里面可以设置参数string或者Array[string]设置除此之外为disable,各个按钮代表的英文在http://fex.baidu.com/ueditor/#start-toolbar

11)是编辑器可以编辑:GetEditor().setEnabled(); 

12)显示隐藏编辑器方法为:setShow(), setHide()

13)设置编辑器高度:setHeight(Number heigth);

5 定制工具栏图标

 1). 方法一:修改 ueditor.config.js 里面的 toolbars 2). 方法二:实例化编辑器的时候传入 toolbars 参数

6上传功能

 1)首先需要在ueditor.config.js里制定处理上传的handler.ashx,下载的demo中叫做controller.ashx 开发者可以随意更换其位置,本人习惯把它放在根目录或者handler文件夹下,如果在根目录下,就把地址改为serverUrl: "/controller.ashx",另外提一下配置文件中获取的url就是配置文件所在的路径如http://localhost:4761/utf8-net/

2)把config.json文件放在项目根目录下,也可以在Config.cs进行设置进行

3)修改config.json里面的路径以及需要修改的配置,里面写的很详细 如imageUrlPrefix为图片访问路径前缀一般为空就可以了,imagePathFormat上传保存路径,可以根据其提示进行各种设置。

免责声明:文章转载自《百度UEditor基本使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇如何在Windows下使用LAPACK和ARPACK [转]NET Core的分布式批处理框架下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Redis布隆过滤器

一、布隆过滤器使用场景 比如有如下几个需求: ①、原本有10亿个号码,现在又来了10万个号码,要快速准确判断这10万个号码是否在10亿个号码库中? 解决办法一:将10亿个号码存入数据库中,进行数据库查询,准确性有了,但是速度会比较慢。 解决办法二:将10亿号码放入内存中,比如Redis缓存中,这里我们算一下占用内存大小:10亿*8字节=8GB,通过内存查询...

jenkins基于Ansible自动发布/回滚/管理

看着似乎用jenkins基于ansible发布spring boot/cloud类的jar包程序,或者tomcat下的war包的需求挺多的,闲来无事,也说说自己做过的jenkins基于ansible的发布方法。 规范与标准 无规矩不成方圆,要做好后期的自动化,标准化是少不了的,下面是我们这边规划的一些标准(非强制,根据自己实际情况调整) 应用名称:{应用...

Hi3518EV300编译U-Boot和内核报错:loadlocale.c:130: _nl_intern_locale_data: Assertion `cnt &amp;lt; (sizeof (_nl_value_type_LC_TIME) / sizeof (_nl_value_type_LC_TIME[0]))' failed. Aborted (core dumped)

下载Hi3518EV300的SDK后编译内核和U-boot,发现爆出如下错误: scripts/kconfig/conf --silentoldconfig Kconfig Aborted (core dumped) Aborted (core dumped) Aborted (core dumped) Aborted (core dumped) Abo...

Phalcon下命令行应用(command line applications)

今天打算在phalcon项目下加入一个定时任务,来发送邮件。 看了官网的例子,配置和运行都少许杂乱,还有个bug,见备注, 我这边主要讲解如何将command line 的配置独立出来,如果初上手的同学,建议先运行官网第一个例子,成功后,再实践一下官网第二个例子,出现报错,就看我备注,然后再看我这如何将配置独立处理。 借鉴思想:主要借鉴Yii框架中,类似功...

使用百度字体编辑器删除不必要字体,减少字体文件体积

百度字体编辑器地址:http://fontstore.baidu.com/static/editor/index.html 使用手册:http://fontstore.baidu.com/static/editor/doc/index.html#introduce 为什么要编辑字体文件? 只所以想要编辑庞大的字体文件的原因,是因为我们可爱的射击湿,想要让数...

驱动实例 — GPIO驱动 485调试 设备树修改

应用场景:使用的是3399pro,控制GPIO1_B5(RS485)的高低电平。来控制uart0的收发。 http://wiki.t-firefly.com/AIO-3399C/driver_gpio.html 有关于3399详细GPIO使用说明 http://www.wowotech.net/device_model/429.html GPIO调试相关...