登录
注册
一键加入QQ群
友善之臂官方网站
首 页
联系我们
淘宝店铺
维基教程
资料下载
搜索帖子!
NanoPC-T2
Core4418
NanoPC-T3 Plus
Core6818
NanoPi-M4B
NanoPC-T4
NanoPC-T6
NanoPi-NEO
NanoPi-NEO Core
NanoPi-NEO Air
NanoPi-M1 Plus
NanoPi-Duo2
NanoPi-NEO3
核心板:
Smart210
Tiny210
Smart4418
Smart6818
SOM-RK3399V2
CM3588(新品)
路由器:
R1
R1S
R2S
R2S Plus
R2C Plus
R4S
R5S
R5C
R6C
R6S
热门版块:
友善之臂最新动态
Linux技术交流区
站点服务
站务管理与公告
裸机程序和微型OS
友善之臂官方客服中心
默认风格
用户中心首页
编辑个人资料
查看个人资料
好友列表
用户权限查看
积分管理
积分转换
特殊组购买
收藏夹
我的主题
基本统计信息
到访IP统计
管理团队
管理统计
在线统计
会员排行
版块排行
帖子排行
个人首页
我的收藏
好友近况
友善之家
Android技术交流区
UI之富文本编辑器-UEditor
友友粉丝快线
开发板销售中心
嵌入式最新资讯
友善之臂最新动态
友善之臂官方客服中心
开发板实战手册及教程
应用方案和定制开发
NanoPi 交流与讨论
NanoPi 玩家交流区
ROM发布区
硬软DIY及开发
嵌入式交流与讨论
Android技术交流区
Linux技术交流区
U-boot技术交流区
WinCE技术交流区
Ubuntu技术交流区
裸机程序和微型OS
OpenWRT讨论区
开发板硬件讨论区
相关资料下载及使用技巧
站点服务
二手交易区
我的论坛我的贴
站务管理与公告
上一主题
下一主题
新 帖
主题 : UI之富文本编辑器-UEditor
复制链接
|
浏览器收藏
|
打印
qdjianghao
级别: 新手上路
作者资料
发送短消息
加为好友
UID:
111595
精华:
0
发帖:
19
金钱:
95 两
威望:
19 点
贡献值:
0 点
综合积分:
38 分
注册时间:
2014-12-31
最后登录:
2016-04-29
楼主
发表于: 2015-01-08 10:22
只看楼主
|
小
中
大
UI之富文本编辑器-UEditor
在做Web应用时,经常会进行富文本编辑,常用的富文本编辑器有很多,比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。
在这里杰瑞教育为大家推荐百度推出的UEditor,UEditor是所见即所得的富文本编辑器,具有轻量、可定制、注重用户体验的特点。
官方网址:ueditor#baidu#com/website/index#html
下载地址:ueditor#baidu#com/website/download#html
UEditor的使用简单步骤:
1、 在使用页面正确导入UEditor的js文件
在这里要注意,config.js文件应该在前。
2、 在页面form表单中添加如下内容
3、 在html后编写如下js代码:官方建议直接调用工厂方法getEditor来创建剪辑器,后续如果用到编辑器时,可直接调用UE.getEditor(“myEditor”)来获取编辑器的实例对象。
下面通过一个具体的需求来说明UEditor的一些配置项和方法的具体用法。
需求:在做某应用时,我们需要对合同进行保存管理。其中,合同里面的具体条款可根据实际需要进行编辑并生成模板。
很显然合同条款不能是杂乱无章纯文本,需要有一定的格式,在这里我们需要使用富文本编辑器来编辑合同条款。
合同条款一般就是带有样式的文本,不会含有图片、视频、附件等内容,很显然通过以上步骤添加的UEditor不符合我们的要求,这就需要我们自己定制UEditor。
如何定制呢?UEditor为我们提供两种设置属性的方式。
方式一:通过修改ueditor.config.js里面的配置信息;
方式二:在创建UEditor的时候,传入配置项参数。
至于具体的配置信息,可以查看官方文档,在这里就不一一赘述。
在这里采用方式二,在创建UEditor的时候,传入配置参数的形式进行定制,代码如下:
很显然定制后的UEditor更符合我们的需求。
在servlet中,可以直接使用通过request的getParamter方法获取UEditor中的编辑数据,参数即为UEditor中属性textarea设置的值。
如何在UEditor中初始化模板数据?同样可以使用两种方式:
一是在配置项中通过设置initialContent属性;
二是通过调用UEditor的setContent方法。
方式一:通过请求Servlet,在Servlet中调用业务方法,将保存在数据库中的合同模板信息加载后保存在request中,并通过转发到合同编辑页面,在页面中将数据取出并在初始化UEditor时赋值。
方式二:直接请求合同编辑页面,在页面中使用UEditor提供的Ajax进行加载合同模板,并通过setContent方法赋值。
这个地方要注意,一定要等到UEditor加载完毕后才能调用setConent方法,因此需要监听UEditor的ready事件。
烟台杰瑞教育科技原创文章,转载请注明出处。查看原文请到杰瑞教育博客园(www#cnblogs#com/jerehedu )。 源代码请到杰瑞教育百度云盘(pan#baidu#com/s/1ntHWo4L )
由于
URL
不能发表,文中所有链接
#
请换为
.
顶端
回复
引用
分享
上一主题
下一主题
友善之家
Android技术交流区
http://www.aiothome.net
访问内容超出本站范围,不能确定是否安全
继续访问
取消访问