文档章节

UEditor(百度富文本编辑器)的暴力使用

issac宝华
 issac宝华
发布于 2016/06/23 15:28
字数 941
阅读 1245
收藏 7

1.下载sdk

下载链接:http://ueditor.baidu.com/website/download.html

Tip:这里下载的是UTF-8版本的。

解压可以看到一个示例文件index.html,可以双击打开该文件,就可以看到富文本编辑器的示例:

然后就是将该sdk放到你的需要的位置:

你可以直接在演示文件index.html文件上做开发,但一般不会这样。这里将在其他的文件中引入该富文本编辑器。

2.引入必要文件

2.1 参考演示文件index.html,可以知道需要引入的是如下文件:

2.2 在需要使用富文本的位置,引入如下代码:

然后还要还要js中实例化改编辑器,代码如下:

对富文本的操作,你可以参考UEditor的api文档,或者你也可以直接参考示例文件的js函数,在示例文件中已经有你叫完备的功能函数。

你可以在示例文件中找到与以下按钮对应的功能函数:

完成以上的操作,即可以在你需要的位置中显示富文本编辑器。

3.根据个人需求修改

我们的目标效果是:

3.1.删减不需要的功能:

删减功能,需要在配置文件中修改配置(umeditor.config.php):

上面的每个字串都是代表一个功能按钮,你只需要删除你不需要的“字串”。

3.2 固定富文本编辑器的高度,内容溢出则产生滚轴。

3.21 固定富文本编辑器的高度,并在溢出时产生滚轴,也可以在配置文件中配置:

首先是配置高度:

再配置,禁止“自动长高”,即禁止文本编辑盖度不会受内容高度影响,默认配置是:内容高度超过富文本设置的高度就会“撑”高富文本编辑器的高度。

这样就配置好。但是这样做有个bug:当你内容溢出产生滚轴,点击全屏,再关闭全屏,你会发现缩小后的富文本编辑器的高度很神奇地被内容的高度撑高,高度不再固定。

3.22 避免的这样的方法,你可以在富文本编辑器的外面加一层父元素,固定父元素高度,让父元素的内容溢出时产生滚轴(将富文本当作内容),如下:

这样做也是有个缺点:功能栏会不能固定顶部,会跟着滚轴滚动:

3.23 最后一个方法是:给这个富文本编辑器的body固定高度,并添加overflow: auto; 属性,首先是要”审查元素“查看body的类选择器是什么:

这样点击全屏还是会有问题:在纵向不能全屏,高度被固定150px;

要解决这个问题,我们就需要监听全屏的按钮,判断目的动作是全屏还是小屏:

首先是通过审查元素,找出“全屏”按钮对用的类选择器:

还需要一个标记位来标记当前屏幕的状态(小屏/全屏)

标记有两种方法:

1) 设置js 的全局变量(但是这个办法亲测由bug,会出现屏幕记录状态错乱的问题);

2) 添加自定义元素属性,通过检测该属性值判断当前状态(选择这种)。

off:小屏;on:全屏

jq函数检测屏幕状态,并动态改变屏幕的高度:

4.改变样式:

通过审查元素找到你需要改变样式的类或id选择器:

往改选择器中添加或覆盖样式(不用去修改他自带的css文件):

© 著作权归作者所有

共有 人打赏支持
issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
Thinkphp整合最新Ueditor编辑器

说到最新的富文本编辑器的确不少(ckeditor、fkeditor、ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 插件中提...

nsns
2018/08/24
0
0
010.UEditor文档

UEditor的简单使用 在Java Web阶段和SSM框架阶段,我们的课程设计中都会使用到富文本编辑器,目前流行的编辑器很多 KindEditor/CKEditor/UEditor/WangEditor等,这里我们使用的是百度开源的,这里...

胖先森
2017/11/27
0
0
量子幽灵/Ueditor For WordPress

强大的百度开源富文本编辑器Ueditor正式登陆wordpress! 此插件最早由taoqili开发,SamLiu改进,但两位作者均不再发布更新版本,大山在此基础上更新到Ueditor1.4.3。在此感谢两位前辈的付出。...

量子幽灵
2016/02/04
0
0
开源富文本编辑器Neditor

Neditor是基于百度的UEditor改进的开源富文本编辑器, Neditor修改了样式, 并增加了Https的支持。 部署和体验 第一步:下载编辑器 下载 Neditor 最新版 或从源码编译 (目前支持以下语言): PH...

marsdream
2018/05/29
0
0
UEditor 1.1.8 发布,百度开源富文本编辑器

UEditor是由百度 Web前端研发部开发的所见即所得的富文本在线编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许互联网开发者自由传播和使用代 码。百度UEditor的推出,可...

红薯
2012/01/10
3K
10

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 以后我偷小鱼干养你

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @庞巴哥 :只有这节奏瞬间变得轻松。。。。。。。。。分享Talking Eyes的单曲《In the sun (Extended Version)》: 《In the sun (Extended Ve...

小小编辑
11分钟前
0
0
多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
7
0
求推广,德邦快递坑人!!!!

完全没想好怎么来吐槽自己这次苦逼的德邦物流过程了,只好来记一个流水账。 从寄快递开始: 2019年1月15日从 德邦物流 微信小app上下单,截图如下: 可笑的是什么,我预约的是17号上门收件,...

o0无忧亦无怖
昨天
7
0
Mac Vim配置

1.升级 vim   我自己 MacBook Pro 的系统还是 10.11 ,其自带的 vim 版本为 7.3 ,我们将其升至最新版: 使用 homebrew : brew install vim --with-lua --with-override-system-vim 这将下...

Pasenger
昨天
8
0
vmware安装Ubuntu上不了网?上网了安装不了net-tools,无法执行ifconfig?

1.重新设置网络适配器还是不行,如下指定nat 2.还需要指定共享网络,我是在无线环境下 3.无法执行ifconfig https://packages.ubuntu.com/bionic/net-tools到这个网站下载net-tools的deb文件...

noob_chr
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部