A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 SH_Jepson 于 2017-8-22 14:16 编辑

欢迎顶贴,回复可下载 入门小demo    
游客,如果您要查看本帖隐藏内容请回复


UEditor 介绍
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。



源码下载
因为富文本编辑器,有功能要与后台配合,比如图片上传,视频上传等,所以官网提供的开发版,一般都集成了后台代码,所以这里我们下载个 PHP 版本就可以了。

http://ueditor.baidu.com/website/download.html#ueditor




UEditor 初始化
最好根据版本号改下包名,我这边 ueditor1_4_3_3-utf8
将整个代码包放到 lib 资源目录中,我们接下来进行第一步 UEditor 初始化。



新建 01_初始化.html 页面,写入以下代码,具体作用已注释注明。
即可完成一个编辑器的基本初始化。



最好在服务器环境下打开,运行效果:



Ueditor 自定义参数配置
编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器。
配置官方提供两种配置方案:
1. 取消 ueditor.config.js 中的注释,然后修改成对应参数
2. 在实例化编辑器的时候,第二个参数传入对象进行配置



所有配置项配置起来,非常便捷,按照上面的配置,可以配置工具栏有哪些功能按钮,文本内容多了是否会自动增高等。
运行效果:

这里可以看到,只有我配置的 toolbars 工具栏功能按钮才显示出来了。

自动长高功能效果:

官方提供了非常详细的配置说明,具体如何配置,可以直接看 api。
所有配置项 说明: http://fex.baidu.com/ueditor/#start-config

Ueditor 定制工具栏图标
刚才简单的配置了几个工具栏图标,这边我们来详细介绍一下,每个工具栏图标如何配置。


只要在 toolbars 数组中,添加对应你需要的工具项,即可定制,你需要的富文本编辑框了。
效果:



可配置的参数有很多:

这里只列举出一部分,具体详见官方API:http://fex.baidu.com/ueditor/#start-toolbar


UEditor 设置获取内容
对编辑器的操作最好在编辑器 ready 之后再做。
设置编辑器内容:  ue.setContent( '内容' );
获取:1. html格式内容:     ue.getContent( )
            2. 纯文本格式内容: ue.getContentTxt( )


运行结果:


控制台打印结果:



UEditor 常用API
上面演示了几个简单的API,其他还有一些常用的API。

设置编辑器内容:

追加编辑器内容:

获取编辑器html内容:

获取纯文本内容:

判断编辑器是否有内容:

编辑器获取焦点:

设置当前区域编辑状态:
不可编辑:

可以编辑:


编辑器显示状态:
设置编辑器显示:

设置编辑器隐藏:


详细的文档,可以查阅官方文档  http://ueditor.baidu.com/doc/#COMMAND.LIST

欢迎顶贴!回复可下载  入门小DEMO  哦!
游客,如果您要查看本帖隐藏内容请回复

点评

回复什么啊?下面的内容快到碗里来  发表于 2017-8-22 15:40

评分

参与人数 1黑马币 +5 收起 理由
绮丽 + 5 很给力!

查看全部评分

12 个回复

倒序浏览
这么多图片 这个帖子一定花了很多时间
回复 使用道具 举报
谢谢分享
回复 使用道具 举报
RandomSolitude 来自手机 初级黑马 2017-9-22 23:45:40
板凳
谢谢分享
回复 使用道具 举报
我来占层楼啊   
回复 使用道具 举报
很有用,值得学习,感谢楼主分享
回复 使用道具 举报
球哥看贴要回帖
回复 使用道具 举报
好好学习,天天向上
回复 使用道具 举报
奈斯
回复 使用道具 举报
回复 使用道具 举报
优秀,奈斯
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马