浏览器变记事本或富文本-笔记

浏览器变记事本或富文本-笔记


笔者用的是360极速版
在浏览器的地址栏输入如下代码,即可得到一个可编辑文本的编辑器

<!-- 都支持常用快捷键(加粗、下划线、斜体Ctrl+B/U/I) -->

<!-- 很基础版 之 基础版2.1(亲测谷歌有效自带copy和下载)2022/6/16 15:28  -->
data:text/html, <html contenteditable><input type='button' value='akak' onclick="javascript:var txt= document.getElementsByTagName('body')[0].innerText;var ele=document.createElement('textarea');ele.value=txt;document.body.appendChild(ele); ele.select(); document.execCommand('Copy');
document.body.removeChild(ele);" /><input type='button' value='xz' onclick="javascript:var txt= document.getElementsByTagName('body')[0].innerText;var a = document.createElement('a');a.href='data:,'+txt;a.download='txt';a.click();;" /></html>


<!-- 很基础版 之 基础版2.0(亲测谷歌360浏览器有效自带copy)2022/6/16 14:29  -->
data:text/html, <html contenteditable><input type='button' value='cp' onclick="javascript:var txt= document.getElementsByTagName('body')[0].innerText;var ele=document.createElement('textarea');ele.value=txt;document.body.appendChild(ele); ele.select(); document.execCommand('Copy'); document.body.removeChild(ele);" /></html>

<!-- 很基础版 之 基础版  -->
data:text/html, <html contenteditable>

<!-- 很基础版 之 美化版  -->
data:text/html, <textarea style="font-size: 28px;color: #535ede; width: 100%; height: 100%; border: none; outline: none" autofocus />

<!-- 可以引入JS和编写JS标签 - 基础版 -->
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

<!-- 可以引入JS和编写JS标签 - 升级版 -->
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"><script>alert(123)</script>
<script src='http://localhost:19078/src/common/js/jquery-1.9.1.min.js'></script>
<script src='http://localhost:19078/src/common/js/cs_command_1.js'></script>
<script> _util.funPrintPass('abcdefg') </script>

<!-- 可以引入JS和编写JS标签 - 升级版 - 可复制内容与变色 -->
data:text/html, <title>Text Editor</title><body ><input type='button' id='btn' value='copy' onclick='funCopy()'/>
<input type='button'  value='red' onclick='funChangeColor("#FF5722")' />
<input type='button' value='green' onclick='funChangeColor("#009688")' />
<input type='button' value='black' onclick='funChangeColor("#393D49")' />
<br/><textarea id='txt' style="font-size: 28px;color: #535ede; width: 100%; height: 100%; border: none; outline: none"></textarea> <script>function funCopy(){var btn= document.getElementById('txt'); btn.select(); document.execCommand('Copy');} function funChangeColor(color){document.getElementById('txt').style.color=color;}</script>

<!-- 可以引入JS和编写JS标签 - 升级版2 - 可以正确得到富文本 -->
data:text/html, <title>Text Editor</title><body ><div id='div3'></div>
<script src='https://unpkg.com/wangeditor/release/wangEditor.min.js'></script>
<script> var E = window.wangEditor;
var editor2 = new E('#div3');
editor2.create()</script>

<!-- 可以引入JS和编写JS标签 - 升级版2 - 可以正确得到富文本 - 编辑区大小自定义 -->
data:text/html, <title>Text Editor</title></style><body ><div id='div2' ></div><div id='div3' style='height:1500px;'></div>
<script src='http://localhost:19078/src/common/js/wangEditor.min.js'></script>
<script> var E = window.wangEditor;
var editor2 = new E('#div2','#div3');
editor2.create()</script>
<style>#div3{height:100%;}</style>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值