tinyMCE 插入图片
分类：pc黑科技 作者：Caq98i 发布时间：2021-09-20 更新时间：2021-09-20 阅读量：2011
tinyMCE 提供了多种插入图片的方式，这里介绍直接使用截屏工具插入图片的方法。基于：Data URI scheme 的 data:image/png;base64
①使用任意截屏工具，截取一张图片，如使用Snipaste。（选取截取区域后，按下键盘上的"Enter"）
②在tinyMCE 的编辑区域，将光标放置于想要插入图片的位置，按下“ctrl+V”组合键，将图片插入到文本。
其原理就是使用了 Data URI scheme 的方法，检查元素会发现图片是这样保存的：data:image/png;base64,……（此处省略N个亿字符），这就是将图片直接嵌入到了网页中，从而不用再从外部文件载入。image/png 是数据的类型，base64 是数据的编码方法，后面的那一堆就是这个image/png文件经过base64编码后的数据。
插入图片流程
注：使用这种方式话，这张图片是被包含在了HTML文件中。使用这种方法虽然方便，但这种方式保存的图片要比正常的 jpg 格式的图片大了20%左右，影响页面的加载速度；同时，一些老旧的浏览器是不支持的（比如 IE 7 浏览器）
另外，也可以使用外链图片，使用方法已经在tinyMCE 入门篇章里介绍过了。（PS：以上动图就是通过外链图片的方法添加的哦(*^_^*)）
阅读完毕，来看看我们推荐的好工具吧！🦀🦀
