百度富文本编辑器 html5,UEditor(百度富文本编辑器)的暴力使用_weixin_29094539的博客-程序员宅基地

技术标签: 百度富文本编辑器 html5  

1.下载sdk

cfea8fa7d09958de1da1b4ec977c63ad.png

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

5bf68d2ae0b43515af1df675eae5727c.png

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

b798e34e01fe5f5927a13dde3dfbb5f4.png

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

19fe4342d5d1d6a5c197b0c97221adbf.png

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

d9c5a4676f5dc4e25c0905895c204ccf.png

2.引入必要文件

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

1d07e7c876e2d984fb917b557675ddb0.png

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

b302fca9270f93a5baf04ba15f09a328.png

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

bc9514aab188dad88d104659964d1b22.png

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

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

288271238fb59af841ea79b5df846218.png

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

3.根据个人需求修改

我们的目标效果是:

88b9d264bba10fb26577849f7638d6bb.png

3.1.删减不需要的功能:

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

e8a4fe04088ac708bf25805109fac28b.png

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

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

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

首先是配置高度:

19597d6c971a392530fe41c401814a48.png

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

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

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

0a321e26c066ca3dde74e624718f9281.png

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

00984cc99d0f554da0b92ceec2776c5e.png

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

5b14e7ae5b89bfc0a0fe05b695844d31.png

856f95ba2fed4285bac279e168c0f16d.png

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

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

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

6ac7363cac9b94f63b904f21937c74d2.png

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

标记有两种方法:

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

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

97cb7b429f745b6985a80bcdeb88493f.png

off:小屏;on:全屏

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

0fe300486024487933ba31b856bd124b.png

4.改变样式:

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

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

cf07374902eecee5e3d013be997c0006.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_29094539/article/details/118235883

智能推荐

linux搭建svn服务器centos并配置钩子_linux svn配置钩子_wuliZs_的博客-程序员宅基地

系统环境:CentOS-7.2(一般没什么事 centos都可以安装)安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件#检查是否安装了低版本的SVNrpm -qa subversion#卸载旧版本SVNyum remove subversionyum安装svnyum -y install subversion版本库创建_linux svn配置钩子

延时队列如何实现?ETCD vs Redis_etcd 与redis_csdnYF的博客-程序员宅基地

前言日常开发中,我们经常会碰到有延时任务的场景,譬如30分钟后关闭订单、在指定时间上架某个活动等,如果是最简单的场景,不考虑服务水平扩容、服务宕机等因素,可能内部用github.com/robfig/cron加MYSQL存储延时信息即可。当然,一般线上服务,不可能不考虑道这些因素的影响,所以才有很多任务调度框架,比如:Quartz、xxl-job、Temporal等。但这次这里想讨论的是中间情况,也就是,既想保证服务能水平扩容、服务宕机任务不丢失,又不想使用那些调度框架(毕竟有部署成本和学习成本)。延时_etcd 与redis

Mysql技术内幕InnoDB存储引擎——表&索引算法和锁_mysql技术内幕innodb阅读顺序_瑛民星的博客-程序员宅基地

表4.1、innodb存储引擎表类型innodb表类似oracle的IOT表(索引聚集表-indexorganized table),在innodb表中每张表都会有一个主键,如果在创建表时没有显示的定义主键则innodb如按照如下方式选择或者创建主键。首先表中是否有唯一非空索引(unique not null),如果有则该列即为主键。不符合上述条件,innodb存储引擎会自动创建一_mysql技术内幕innodb阅读顺序

CGB2011-DAY06_草帽团、的博客-程序员宅基地

1. 完成商品CRUD操作 更新/删除/上架/下架2. 富文本编辑器实现 大字段存储 text 文本域3. 文件上传操作

揭露笔记本商家的N多谎言_weixin_33743661的博客-程序员宅基地

希望对想NB的人有点用!!随着笔记本电脑技术发展的日新月异,比如前年还流行奔腾4-M处理器,去年就流行迅驰平台,而今年流行SONOMA平台,到了明年就流行支持双核心的NAPA平台。如此的速度未免让人眼花缭乱,消费者也似乎有点跟不上这个速度,在一些新技术的认识上摸棱两可,搞不太明白。一些厂商和商家抓住了消费者不太懂技术这个短处,对笔记本电脑进行虚假的宣传,逐渐形成了下面这几个比...

移动端的一些解决兼容性的方案_移动端兼容性解决方案_前端进阶之路的博客-程序员宅基地

随着手机的普及,移动端的开发也成了一个重要的方向,但由于设备的不统一会造成一些兼容性问题,1、安卓浏览器看背景图片,有些设备会模糊。用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,..._移动端兼容性解决方案

随便推点

配置利用Tilcon 5.8 Radar Demo for vxWorks 6.8_weixin_30918633的博客-程序员宅基地

在写这篇文章之前,xxx已经写过了几篇关于改配置利用主题的文章,想要了解的朋友可以去翻一下之前的文章[email protected]在vxworks 6.8下利用tilocn 58运行了自带的RadarDemo每日一道理 试试看——不是像企鹅那样静静的站在海边,翘首企盼机会的来临,而是如苍鹰一般不停的翻飞盘旋,执著的寻求。 试试看——不是面对...

Python编程从入门到实践(第五章if语句学习总结)_if语句实验报告总结_louzhu_lz的博客-程序员宅基地

Python编程从入门到实践(第五章if语句学习总结)Python编程从入门到实践基础知识:https://blog.csdn.net/louzhu_lz/article/details/90721685Python编程从入门到实践(第三、四章的列表和元祖):https://blog.csdn.net/louzhu_lz/article/details/91354506#第五章 if 语句#..._if语句实验报告总结

用JAVA写数字金字塔_java数字金字塔_纪文啊!的博客-程序员宅基地

今年的蓝桥杯中我遇到了一道题是关于数字金字塔的,那时候在比赛时可能是各方面的因素有思路但是没有实现,直到今天回过头来看,其实只要思路正确了题目就会迎刃而解了,其实数字金字塔的的解题思路就是把金字塔分成两个直角三角形如下所示: 1 12 1 123 21 1234 321 12345 4321123456 54321左边的是6行的直角三角形,他的规律就是每行的最大数就等..._java数字金字塔

pytorch实现微调(finetune) vgg16和resnet50_resnet50 fine-tune_潜行隐耀的博客-程序员宅基地

记录一下pytorch中微调vgg16的方法:torchvision.models包中封装了alexnet,resnet、squeezenet,vgg,inception等常见网络的结构,并可以供我们方便地调用在ImageNet上预训练过的模型。以torchvision.models.vgg16_bn为例(_bn表示包含BN层),网络结构包含了以下三个部分:1. features(一堆卷积和最大池化操作):(features): Sequential( (0): Conv2d(3,_resnet50 fine-tune

利用hover伪类实现点击文字弹出图片_兼容好的点击文字弹出图片_久伴亦久别的博客-程序员宅基地

效果图这个二维码图片是可以用绝对定位控制位置的实现代码图片路径由于是本地,为了效果大家需要的自己设置图片路径<!DOCTYPE html><html><head> <title></title><style type="text/css">body { margin: 0; padding: 0;}_兼容好的点击文字弹出图片

Oracle中时间相互转换_oracle时间转换_醉梦洛的博客-程序员宅基地

1.转字符串类型select sysdate from dual; --获取Oracle系统时间 转你想要的字符串格式的时间:select to_char(sysdate,'yyyy-MM-dd HH:mm:SS') from dual; --Oracle系统时间转字符串2.转Date类型①字符串转dateselect to_date('2019-..._oracle时间转换

推荐文章

热门文章

相关标签