把ueditor的 p 标签 改成a标签_通过a标签,实现本地动态插入文本下载文件

方式一:

第一步,将文本内容转为base-64
let str = '{"declaration": {}}';
// 通过window自带的方法btoa(),将内容转为base-64,该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串
// 不能直接编译中文
const result = window.btoa(str); // "ewogICAgImRlY2xhcmF0aW9uIjoge30KfQ=="
// 对应还有一个方法atob(),可以将base-64转换回来
window.atob(result ); // "{"declaration": {}}"
  1. window.atob()
  2. window.btoa()
第二步,通过a标签实现文件下载
let str = '{"declaration": {}}';
// 通过window自带的方法btoa(),将内容转为base-64
const result = window.btoa(str); // "ewogICAgImRlY2xhcmF0aW9uIjoge30KfQ=="
const fileType = 'text/plain';// 定义生成文件的后缀类型,还可以定义为json类型"application/json"

<a href=`data:${fileType };base64,${result}` download="file">下载文件</a>
示例
<!DOCTYPE html>
<html>
<body>

<a id="download" href='' download="file">下载文件</a>
<script>
    const download = document.querySelector('#download');
    const str = 'hello world';
    const result = window.btoa(str);
    const fileType = 'application/json';
    download.setAttribute('href',`data:${fileType};base64,${result}`)
</script>
</body>
</html>

9d17eca4d2e73ab79339e27cd3dad0d3.png

4bd4d6bfa39b423ec902e780c652981f.png

注意:我在使用btoa方法的时候,遇见过乱码的现象,刷新浏览器之后就没有再遇见了,非常的邪乎,根据需要encodeURIComponent整一下,应该问题不大

方式二:(推荐)

通过Blob对象,创建下载链接的形式
const json = '你的数据';
let blob = new Blob([json], { type: "application/json;charset=utf-8" });
<a href={URL.createObjectURL(blob)} download="file" >下载文件</a>
为了在UEditor编辑器增加CSS样式,可以通过以下步骤来实现: 1. 打开UEditor的配置文件,一般来说是config.js文件。 2. 在“UEDITOR_CONFIG”对象添加如下代码: ```javascript // 自定义样式 , 'customstyle':[ { tag:'h1', name:'tc f-26 lh-66', label:'大标题', style:'border-bottom:2px solid #000;font-size:26px;padding:26px 10px 10px;margin:10px 0 20px;' }, { tag:'h2', name:'tc f-20 lh-48', label:'标题', style:'border-bottom:1px solid #ccc;font-size:20px;padding:10px;margin:10px 0 15px;' }, { tag:'p', name:'tc f-14 lh-30', label:'段落', style:'font-size:14px;line-height:30px;padding:10px;margin:10px 0;' } ] ``` 以上代码,我们定义了三种自定义样式:大标题、标题和段落。其,每种样式都包括了标签、名称、标签显示的文字和CSS样式。 3. 在配置文件找到“UEDITOR_CONFIG.toolbars”对象,找到需要使用自定义样式的工具栏按钮,例如“字号”按钮,将其配置修改为: ```javascript ['fontfamily', 'fontsize', '|', 'customstyle', 'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'insertimage', 'insertvideo', '|', 'removeformat', 'source'] ``` 4. 保存配置文件,重新加载页面,即可在编辑器看到自定义样式按钮。选需要应用样式的文本,点击对应的按钮即可。 至于自动添加<p>标签的问题,可以在配置文件找到“UEDITOR_CONFIG.filterRules”对象,将其的“p”标签过滤规则删除即可。具体代码如下: ```javascript , filterRules: { // <!-- 过滤的标签 --> tagNames: { style: true, script: true, div: 1, p: 1 }, ... } ``` 将其的“p: 1”删除即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值