vue修改富文本中的元素样式
富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题。
首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到。
在修改的时候,一般是按标签进行修改,当然,也可以按class和id等,这就需要依赖到富文本的源码,看是用的什么id和class。
比如对p标签进行修改样式。
方法1:在updated周期进行修改。
updated() {
$('.descBox').find('p').css('color', 'blue');
},
方法2:将style设置成全局
去掉style标签中的scoped属性即可。
vue修改富文本中的元素样式的更多相关文章
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- Android检测富文本中的<img标签并实现点击效果
本文旨在:通过点击一张图片Toast输出位置与url链接. 闲话少说,实现原理大概是酱紫的::通过正则表达式检测富文本内的图片集合并获取url,在src=“xxx” 后面添加 onclick方法,至于 ...
- 从html富文本中提取纯文本
其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式. 所以只需要将富文本字符串中的“<.....>”标签剔除,即可得到纯文本.我们可以使用正则表 ...
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
- vue 如何拿到后台传回的富文本中的img,进行9宫格排列展示以及相关处理
描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理: 1.let img = this. ...
- Vue之富文本tinymce爬坑录
前言 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器. *案例demo版本:vue-t ...
- Jquery会死吗?我为什么不用vue写富文本!
一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已 ...
- 微信小程序富文本中的图片大小超出屏幕
这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi, '& ...
随机推荐
- 迭代器(Iterator)的使用
迭代器(Iterator)的使用 我这里主要讲一下聚合式迭代器(IteratorAggregate) 因为聚合式迭代器和ArrayIterator配合使用可以直接跳过Iterator需要实现的5个方法 ...
- mxml 嵌入as代码出错,缺少 CDATA
如果<mx:Script> 中有大于小于符号,代码必须包含在<![CDATA[ 之中,否则会报错
- 英特尔® Open Image Denoise 库有助于节省时间,提高质量
在使用光线跟踪增强真实性与沉浸感时,游戏开发人员面临复杂的权衡.为了克服一系列挑战,英特尔创建了使用光线跟踪进行图像渲染的一整套解决方案,包含高性能开源滤波器.该解决方案已发布测试版,被集成至 Uni ...
- python学习之模块-模块(五)
5.10 包 5.10.1 包的概念 [官网解释] Packages are a way of structuring Python's module namespace by using " ...
- LeetCode.977-排序数组的平方(Squares of a Sorted Array)
这是悦乐书的第369次更新,第397篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第231题(顺位题号是977).给定一个整数数组A按有序递增顺序排序,返回每个数字的平方, ...
- SSM的开发步骤分析
完整开发步骤 导包 spring的jar包 mybatis的jar包 mybatis-Spring的jar包 aop的依赖jar包 oracle等数据库连接的jar包 DataSource的jar包 ...
- SpringCloud 和 Dubbo 有哪些区别?
首先,他们都是分布式管理框架. dubbo 是二进制传输,占用带宽会少一点.SpringCloud是http 传输,带宽会多一点,同时使用http协议一般会使用JSON报文,消耗会更大. ...
- windows OS安全配置【持续更新20190618】
https://www.52stu.org/?p=76 来源:5号暗区 5号黯区 五号黯区 5号暗区 windows系统的一些加固方法等 关闭445端口: REG ADD HKLM\SYSTEM\Cu ...
- 【神经网络与深度学习】【CUDA开发】caffe-windows win32下的编译尝试
[神经网络与深度学习][CUDA开发]caffe-windows win32下的编译尝试 标签:[神经网络与深度学习] [CUDA开发] 主要是在开发Qt的应用程序时,需要的是有一个使用的库文件也只是 ...
- elasticsearch 冷热数据的读写分离
步骤 一.冷热分离集群配置 比如三个机器共六个node的es集群. 每个机器上各挂载一个ssd 和 一个sata.每个机器需要启动两个es进程.每个进程对应不同类型的磁盘. 关键配置: node.ma ...