vue中使用Base64转码(Tinymce富文本保留HTML标签)

news2024/12/22 17:58:10

在vue项目中,我们经常使用到富文本编辑器,例如博主的项目(见上图),这里需要把富文本内的HTML结构,发放到Android端做混合应用的开发,因此HTML结构必不可少的!

但是浏览器在向服务器发送数据时,有可能出现不识别前端发送的特殊字符,或者直接丢弃特殊字符,此时可以使用Base64转码!

 

1. 前端需要发送给服务器的富文本(Tinymce编辑器)

{
    content: `<p><strong>准备以下个人防护设备:</strong></p>
				 <ul>
                     <li>绝缘手套, PN: 81692355210</li>
                     <li>救援钩, PN: 81692355208</li>
                     <li>防护面罩, PN: 81692355209</li>
                     <li>塑料楔子: 83300490538</li>
                     </ul>`
}

2. 使用 js-base64包 实现base64的编码、解码

# 安装依赖
npm install --save js-base64
# xx.vue页面组件内引入
import { encode, decode } from 'js-base64';

# 合适的地方调用encode编码产生Base64,例如:
axios.post('', {
  content: encode('特殊字符')
})

# 合适的地方调用decode解码得到正确数据,例如:
decode(Base64文件)

-------------------------End-------------------------

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【MySQL基础】

目录 一、概述 1.什么是数据库 2.数据库能干什么 2.1 企业应用 2.2 金融行业 2.3 电子商务 2.4 社交媒体 2.5物联网 3.为什么要用数据库&#xff0c;优势、特性&#xff1f; 3.1 可靠性和稳定性 3.2 数据管理能力 3.3 数据共享和集成 3.4 数据安全性和隐私保护 3…

新零售转型战略:打造数字化时代持续性盈利的商业模式

新零售达成什么样子&#xff0c;能够创造更大得客户价值&#xff0c;从企业得角度来看&#xff0c;他一定要提升企业得获利能力。新零售应该怎么做&#xff1f;以客户需求为本&#xff0c;找出需求&#xff0c;重新创造场景. 从而提升用户体验加强粘性&#xff0c;而蚓链数字化…

抖音seo账号矩阵系统源码如何开发布局?

目录 一、 抖音SEO账号矩阵系统源码的开发布局步骤如下&#xff1a; 二。 开发部署源码 三、 开发部署功能设计 1. 短视频AI智能创作 2. 托管式账号管理: 3. 数据分析 4. 智能营销获客 四。 抖音seo源码开发部署交付技术文档包含 五。 开发代码展示&#xff1a; 一、 抖…

Layui下拉多选框

标题xmSelect插件&#xff1a; xmSelect文档 下载Layui第三方插件 下拉多选框效果&#xff1a; 实现方法(例子)&#xff1a; 将xmSelect插件的xm-select.js文件引入到layui中&#xff1a; <script src"public/js/xm-select/xm-select.js"></script> …

借助 Mybatis 的动态 SQL 解决传参不确定问题

在上一篇的&#xff1a;Mybatis 操作数据库的基本 CRUD 以及查询操作详析_糊糊涂涂的博客-CSDN博客中介绍了Mybatis使用固定SQL语句操作数据&#xff0c;本篇介绍 Mybatis 一个强大的特性&#xff1a;动态SQL。 动态 SQL 解决什么问题&#xff1f; 那当我们要执行的业务逻辑有…

carla与g29联合调试(一)

前言&#xff1a; 之前做的carla与g29的联合调试&#xff0c;现在记录一下carla控制g29的实现流程。 一、总体通讯流程 主要实现为carla中车辆的方向盘转动带着g29跟着一起转动&#xff0c;使用ros通讯来实现这个过程。 二、具体实现流程 2.1首先确定g29的力反馈和转动 使…

基于LoRA微调部署Stable Diffusion【免费试用阿里云】

文章目录 Stable Diffusion介绍环境及资源准备过程注交互式建模&#xff08;PAI-DSW&#xff09;的试用在创建的工作空间中创建实例安装 Diffusers Stable Diffusion介绍 Stable Diffusion 是一种文本到图像的潜在扩散模型&#xff0c;由 Runway 和慕尼黑大学合作构建&#xf…

学习day52

1.关于 error Component name "School" should always be multi-word vue/multi-word-component-names 这里是因为脚手架的规范原因&#xff0c; 解决办法&#xff1a; 我是在vue.comfig.js文件中加入了一条配置&#xff0c;即 lintOnSave:false 整个文件的完整…

Spring Boot单元测试入门指南

Spring Boot单元测试入门指南 JUnit是一个成熟和广泛应用的Java单元测试框架&#xff0c;它提供了丰富的功能和灵活的扩展机制&#xff0c;可以帮助开发人员编写高质量的单元测试。通过JUnit&#xff0c;开发人员可以更加自信地进行重构、维护和改进代码&#xff0c;同时提高代…

(学习笔记)如何理解TCP是面向字节流的协议,UDP是面向报文的协议?

如何理解字节流&#xff1f; 之所以会说TCP是面向字节流的协议&#xff0c;UDP是面向报文的协议&#xff0c;是因为操作系统对TCP和UDP协议的发送方的机制不同&#xff0c;也就是问题原因在发送方 为什么UDP协议是面向报文的协议&#xff1f; 当用户消息通过UDP协议传输时&…

从原理到实践,分析 Redisson 分布式锁的实现方案(二)

上篇讲解了如何用 Redis 实现分布式锁的方案&#xff0c;它提供了简单的原语来实现基于Redis的分布式锁。然而&#xff0c;Redis作为分布式锁的实现方式也存在一些缺点。本文将引入Redisson来实现分布式锁。 一、Redisson是什么 Redisson是一个基于Redis的分布式Java框架。它提…

flutter(01) windows桌面版 编译环境安装指南

1 flutter环境安装 flutter官网参考&#xff1a;Install | Flutter 先下载flutter SDK>&#xff1a;flutter sdk下载--官网&#xff0c;之后解压到C:\Users\XXX\data&#xff08;这里以该路径为例&#xff0c;但可以为其他自定义路径&#xff09;目录下&#xff0c;在这里…

5.python设计模式【单例模式】

内容&#xff1a;保证一个类只有一个实例&#xff0c;并提供一个访问它的全局访问点角色&#xff1a; 单例&#xff08;Singleton&#xff09; UML图 举个例子&#xff1a; 需求&#xff1a;一个类只能实例化一个对象&#xff0c;不能实例化多个对象 from abc import abstract…

MATLAB与ROS联合仿真——ROS环境搭建及相关准备工作(上)

本篇文章主要介绍在安装完ROS后&#xff0c;在进行MATLAB与ROS联合仿真之前&#xff0c;需要进行的一些环境搭建以及准备工作&#xff0c;主要分为 创建ROS工作空间及功能包、必备功能包安装、安装Gazebo11、导入实验功能包至工作空间、安装Visual_Studio_Code(选做)、常用便捷…

python 面向对象 - 类 - 实例 - 类的使用 - self - init方法 - ATM面向对象实验

目录 面向过程和面向对象的对比&#xff1f; 面向对象 面向对象两个重要概念&#xff1a; > class&#xff08;类&#xff09;、实例 类&#xff1a;具有相同属性或方法的对象的集合 属性(变量)&#xff1a;编号、位置、余额 方法&#xff08;函数&#xff09;&#xf…

[论文阅读笔记24]Social-STGCNN: A Social Spatio-Temporal GCNN for Human Traj. Pred.

论文: 论文地址 代码: 代码地址 作者在这篇文章中直接用GNN对目标的轨迹时空特征进行建模, 并用时序CNN进行预测, 代替了训练难度较大和速度较慢的RNN类方法. 0. Abstract 行人轨迹预测是一个比较有挑战性的任务, 有着许多的应用. 一个行人的轨迹不仅是由自己决定的, 而且受…

Vue消息订阅与发布

引入第三方库pubsub.js: npm i pubsub-js Student.vue import pubsub from pubsub-jsmethods:{sendStudentName(){// this.$bus.$emit(hello,this.name)pubsub.publish(hello,666)}}, School.vue import pubsub from pubsub-jsmounted() {// console.log("school&quo…

【监控系统】Promethus的查询PromQL详解及案例实战

首先我们先来了解一下什么是PromQL。 PromQL是Prometheus提供了内置的数据查询语言PromQL&#xff0c;全称为Prometheus Query Language。PromQL是对指标(Metric)的查询/聚合/过滤的处理&#xff0c;Metric的语法格式 <metric name>{<label name><label value&…

优维低代码实践:添加构件

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…

Mac 安装启动RabbitMq

使用HomeBrew安装 未安装的请参照我的这篇Mac安装HomeBrew文章 安装 执行命令 brew install rabbitmq启动方式 brew services start rabbitmq端口说明 端口用处5672RabbitMQ通讯端口&#xff0c;也就是连接使用的端口15672RabbbitMQ管理界面端口&#xff0c;需要开启Manage…