【js + ckeditor】插入base64格式的图片

一、需求说明

直接把图片转成base64插入到富文本

二、需求分析

1、富文本图片格式处理位置

在ckeidtor的目录下有个plugins文件夹,在plugins下新建一个文件夹(自己命名,如simpleupload),进入simpleupload文件夹,再新建一个plugins.js文件,对应编写js代码。

2、将图片转为base64

通过调用 FileReader 对象的 readAsDataURL 方法可以将文件读取成一个data URL,再通过这个 data URL 来获取 Base64字符串。

 三、解决办法

plugins.js文件全部代码如下:

(function () {// 保存图片方式:选择图片以base64编码保存var a = {exec: function (editor) {// 此处定义点击按钮时的行为var $file = document.createElement("input");$file.type = "file";$file.accept = ".jpg,.png,.jpeg";// $file.multiple = "multiple";//选择图片时,可以多选$file.click();$file.addEventListener("change", function (e) {var fileList = e.target.files;if (fileList.length > 0) {// 因为一次只允许添加一张图片var imageData = fileList[0];// 检测后缀名var lastIndex = imageData.name.lastIndexOf(".");var imageSuffix = imageData.name.substring(lastIndex + 1);// 判断后缀名if (!(imageSuffix === "png" || imageSuffix === "jpg" || imageSuffix === "jpeg")) {alert('图片格式只支持"png, jpg, jpeg格式"');return;}// 大小不能超过2Mif (imageData.size > 2 * 1024 * 1024) {alert("图片大小不能超过2M");return;}// 使用FileReader接口读取图片var reader = new FileReader();reader.addEventListener("load", function () {var imageBase64 = reader.result; //base64编码editor.insertHtml("<p><img style='max-width:70%' class='ckeditorImg' src=" + imageBase64 + "  ></p>");});// 将图片转成base64格式reader.readAsDataURL(imageData);editor.isImg = true;editor.imgUrl = reader.result;return editor;}});}};b = "simpleupload";CKEDITOR.plugins.add(b, {init: function (editor) {editor.addCommand(b, a);editor.ui.addButton("simpleupload", {label: "添加图片", //鼠标悬停在插件上时显示的名字icon: "plugins/simpleupload/uploadImg.png", //自定义图标的路径command: b,id: "simpleupload"});}});
})();

四、参考链接

参考1:前端实现ckeditor插入图片,不必经过上传到服务器再插入到富文本

参考2:【JS】img标签使用base64图片以及如何将图片转为base64格式_img base64-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/361774.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java Web】XML格式文件

目录 一、XML是什么 二、常见配置文件类型 *.properties类型&#xff1a; *.xml类型&#xff1a; 三、DOM4J读取xml配置文件 3.1 DOM4J的使用步骤 3.2 DOM4J的API介绍 一、XML是什么 XML即可扩展的标记语言&#xff0c;由标记语言可知其基本语法和HTML一样都是由标签构成的文件…

安卓直装植物大战僵尸杂交版V2.1版完美运行

安卓直装植物大战僵尸杂交版V2.1版完美运行 链接&#xff1a;https://pan.baidu.com/s/1SPFouV8T-AV2LnUoZfy6lQ?pwd3gl6 提取码&#xff1a;3gl6

【unity实战】制作unity数据保存和加载系统——大型游戏存储的最优解

最终效果 文章目录 最终效果前言存储位置信息存储更多数据存储场景信息持久化存储数据完结 前言 前面写过小型游戏存储功能&#xff1a; 【unity实战】制作unity数据保存和加载系统——小型游戏存储的最优解&#xff08;包含数据安全处理方案的加密解密&#xff09; 这次做一…

告别数据线!轻松实现iOS和安卓设备间的文件共享

用 AirDroid 的附近传输功能&#xff0c;完全免费&#xff0c;几十个G的文件也可以相互传输。不限制iPhone和iPad数量&#xff0c;多个设备同时登录也不会强迫下线。 当你要在苹果手机和安卓手机之间传输文件&#xff0c;请将AirDroid安装到两台手机上&#xff0c;然后登录同一…

搞定求职难题:工作岗位列表+简历制作工具 | 开源专题 No.75

SimplifyJobs/New-Grad-Positions Stars: 8.5k License: NOASSERTION 这个项目是一个用于分享和跟踪美国、加拿大或远程职位的软件工作机会列表。该项目的核心优势和关键特点如下&#xff1a; 自动更新新岗位信息便捷地提交问题进行贡献提供一键申请选项 BartoszJarocki/cv…

从0到1实现LLM学习笔记附录B(GPT-4o翻译版)

来源&#xff1a;https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch

通过混合栅极技术改善p-GaN功率HEMTs的ESD性能

来源&#xff1a;Improved Gate ESD Behaviors of p-GaN PowerHEMTs by Hybrid Gate Technology&#xff08;ISPSD 24年&#xff09; 摘要 本工作中&#xff0c;首次证明了混合栅极技术在不增加额外面积和寄生效应的前提下&#xff0c;能有效提升p-GaN HEMTs的栅极静电放电(E…

5G赋能安防视频监控:EasyCVR视频汇聚融合创新技术,共筑多场景安全防线

随着科技的快速发展&#xff0c;第五代移动通信技术&#xff08;5G&#xff09;已逐渐成为我们生活中的重要组成部分。其中&#xff0c;5G技术以其超高速、低延迟、大连接数的特点&#xff0c;正在深刻改变着我们的生活方式和社会运行模式。安防监控领域作为社会安全的重要组成…

Web Worker 学习及使用

了解什么是 Web Worker 提供了可以在后台线程中运行 js 的方法。可以不占用主线程&#xff0c;不干扰用户界面&#xff0c;可以用来执行复杂、耗时的任务。 在worker中运行的是另一个全局上下文&#xff0c;不能直接获取 Window 全局对象。不同的 worker 可以分为专用和共享&…

Golang | Leetcode Golang题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; func numIslands(grid [][]byte) int {res : 0for i : 0; i < len(grid); i {for j : 0; j < len(grid[i]); j {if grid[i][j] 1 {resdfs(grid, i, j)}}}return res }func dfs(grid [][]byte, r, c int) {h, w : len(grid), len(gri…

ElasticSearch索引架构与存储

关于ES官网的介绍: Elasticsearch provides near real-time search and analytics for all types of data. Whether you have structured or unstructured text, numerical data, or geospatial data, Elasticsearch can efficiently store and index it in a way that support…

python--序列化模块json与pickle

什么叫序列化&#xff1f; 将原本的字典、列表等内容转换成一个字符串的过程就 叫做序列化。 多用的两个序列化模块&#xff1a;json与pickle json&#xff0c;用于字符串 和 python数据类型间进行转换 pickle&#xff0c;用于python特有的类型 和 python的数据类型间进行转换 …

springcloud-sentinel 限流组件中文文档

快速开始 欢迎来到 Sentinel 的世界&#xff01;这篇新手指南将指引您快速入门 Sentinel。 Sentinel 的使用可以分为两个部分: 核心库&#xff08;Java 客户端&#xff09;&#xff1a;不依赖任何框架/库&#xff0c;能够运行于 Java 8 及以上的版本的运行时环境&#xff0c…

星坤Type-A连接器:创新快充技术,引领电子连接!

快速发展的电子时代&#xff0c;消费者对电子设备的性能和便利性有着更高的要求。特别是在充电和数据传输方面&#xff0c;快充技术和高速传输已成为市场的新宠。中国星坤公司推出的Type-A连接器系列&#xff0c;以其卓越的性能和创新的设计&#xff0c;满足了市场对高效、稳定…

Java数据脱敏

数据脱敏 敏感数据在存储过程中为是否为明文, 分为两种 落地脱敏: 存储的都是明文, 返回之前做脱敏处理不落地脱敏: 存储前就脱敏, 使用时解密, 即用户数据进入系统, 脱敏存储到数据库中, 查询时反向解密 落地脱敏 这里指的是数据库中存储的是明文数据, 返回给前端的时候脱…

电阻屏和电容屏

目录 一、电阻屏 1.欧姆定律 2.电阻屏原理 &#xff08;1&#xff09;测量 X 坐标 &#xff08;2&#xff09;测量 Y 坐标 3.电阻屏数据 二、电阻屏 1.原理 2.电容屏数据 &#xff08;1&#xff09;Type A &#xff08;2&#xff09;Type B 3.电容屏的实验数据 一、…

Jira实践案例分享:小米集团如何通过API请求优化、数据治理与AI智能客服等,实现Jira系统的高效运维

日前&#xff0c;Atlassian中国合作伙伴企业日活动在上海成功举办。活动以“AI协同 创未来——如何利用人工智能提升团队协作&#xff0c;加速产品交付”为主题&#xff0c;深入探讨了AI技术在团队协作与产品交付中的创新应用与实践&#xff0c;吸引了众多业内专家、企业客户及…

文心智能体平台介绍和应用:制作你的智能体(运维小帮手)

这是我自己制作的智能体 大家可以了解一下&#xff01; 运维小帮手&#xff01;https://mbd.baidu.com/ma/s/tE19dqvr 文心智能体平台官网首页 点击跳转&#xff01;https://agents.baidu.com/ 什么是智能体平台&#xff1f; 文心智能体平台&#xff08;Wenxin Intelligen…

关于Vite+Vue+Ts WebStorm路径别名的问题

一、准备一个项目 二、在 vite.config.js 中添加 resolve: {alias: {: /src}} 三、tsconfig.app.json中添加代码 //添加代码"baseUrl": ".","paths": {"/*": ["src/*"]}把src的一个文件修改路径为开头 四、安装插件 npm i …

第 11 课:组件介绍与自定义开发

本讲主要介绍了隐语的组件标准、已有的组件能力以及进一步的自定义开发流程。经过本讲的学习&#xff0c;可以为将隐语集成到任意调度系统&#xff0c;基于Kusica/SecretPad进行二次开发&#xff0c;以及参与隐语开放标准共建建立基础。 一、隐语开放标准 隐语提出的适用于隐私…