vue中TinyMCE图片 “data-mce-src” 属性的问题
1.问题
在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个“data-mcee-src” 属性,而保存时实际也是保存的“data-mce-src”的值。
按正常逻辑这两个属性值应该是一样的,但是tinyMCE会改变“data-mcee-src” 属性值。如图:

2.问题解决
网上搜索出一个答案,原问题 链接 。
如图

翻译:
我正在用 tinyMCE 4.0.11,遇到些问题,因为它会给 img 标签添加一个 “data-mcee-src” 属性,这个属性会重写 “src” 属性。
比如我添加一个图片它的src=“http://example.com/img.jpg”,
它的“data-mce-src”属性就会自动在开始加一个“/”,变成 “/http://example.com/img.jpg”.
我怎样才能阻止 tinymce添加“data-mce-src”属性呢?
回答

答案
就是在tinyMCE初始化配置里添加两个参数,告诉插件说不要使用相对路径:
relative_urls: false,
remove_script_host: false,
如图:

总结
1.定位问题
2.正确地搜索
3.结合代码解决
vue中TinyMCE图片 “data-mce-src” 属性的问题的更多相关文章
- vue中关于v-for性能优化---track-by属性
vue中关于v-for性能优化---track-by属性 最近看了一些react,angular,Vue三者的对比文章,对比来说Vue比较突出的是轻量级与易上手. 对比Vue与angular,Vue有 ...
- vue中对于图片是否正常加载的思考
问题:由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片: 方案:1,由于后台返回的是一个图片id数组,例如 imgList=['343313131','21333 ...
- Vue中错误图片的处理
在一个Vue的PC项目中,要求给错误图片不要让它显示丑陋的图片,就要给图片写一个失败后的默认图片, 在这里写了两种方法, 第一种方法,也就是百度到的最多的代码,就是给一张图片一个默认值. 第二种问题, ...
- 如何在vue中引入图片?
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...
- vue中书写JSX一些坑-特殊属性名
举例说明, T1和T2引用Sub时, key2会出现在props以及data.attrs中, 而key则在data中 const Sub = ({data, props}) => { conso ...
- react项目中关于img标签的src属性的使用
在一个html文件中,img的src属性赋值为相对路径或绝对路径的字符串即可访问到图片.如下: <img src="../images/photo.png"/> 但在j ...
- vue中img图片加载中以及加载失败显示默认图片问题
加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...
- vue中组件的data为什么是一个函数
1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...
- Vue中的静态资源管理(src下的assets和static文件夹的区别)
### 你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的. 在所有 ...
随机推荐
- Eureka工作原理及心跳机制
Eureka原理 1.基本原理上图是来自eureka的官方架构图,这是基于集群配置的eureka:处于不同节点的eureka通过Replicate进行数据同步Application Service为服 ...
- Visual Studio Code 配置C、C++ 文件debug调试环境
目录 vscode C/C++ Extension Pack 插件安装 vscode windows 端 debug 配置 window MinGW 环境安装 windows 端 C.CPP 单文件 ...
- Python 随机(random)模块的不可预测之美
1 . 概念 1.1 真.伪随机数 大部分的计算机语言都会提供 API 生成随机数,此类 API 称为随机数生成器. 计算机可以用随机数模拟现实世界中的各种随机概率问题,没有随机生成器的编程语言不是& ...
- 强大的数据包处理程序scapy
实验目的 利用scapy工具构造arp.icmp数据包,发送到目标主机,根据应答包推测出目标系统存活情况 实验原理 Scapy是Python写的一个功能强大的交互式数据包处理程序,可用来发送.嗅探.解 ...
- python数据结构:数组和列表
线性结构有两种:数组和列表 array和list 其中list各项操作的时间复杂度如下 因为insert是在头部插入 所以列表所有元素后移,时间复杂度为O(n) remove移除列表中某个值的第一个匹 ...
- 《Symfony 5全面开发》教程03、使用Controller创建第一个页面
我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...
- omnet++:cMessage、cSimpleModule、cGate
cMessage Message可以被调度(self-message).取消.从一个Gate发送出去.直接发给另一个module:所有以上,都是通过cSimpleModule来实现的. Message ...
- Context包源码解析(附面经)
Context包源码解析 Context就相当于一个树状结构 最后请回答一下这个问题:context包中的方法是线程安全吗? Context包中主要有一个接口和三个结构体 Context接口 type ...
- 数字逻辑实践6-> 从数字逻辑到计算机组成 | 逻辑元件总结与注意事项
00 一些前言 数字逻辑是计算机组成与体系结构的前导课,但是在两者的衔接之间并没有那么流畅,比如对面向硬件电路的设计思路缺乏.这篇总结是在数字逻辑和计组体系结构的衔接阶段进行的. 虽然这篇文是两门课的 ...
- Hystrix&Dashboard配置使用
目录 Hystrix是什么 熔断 什么是熔断 熔断类型 打开 半开 关闭 使用方法 导包 添加启动注解 新增方法 测试 降级 什么是降级 使用方法 导包 修改yml,新增如下 启动类新增注解 @Ena ...