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

HaveAGoodOne

已于 2022-06-16 15:29:20 修改

阅读量879

点赞数 1

分类专栏： javascript 文章标签： html html5 javascript

于 2020-05-26 16:00:11 首次发布

本文链接：https://blog.csdn.net/HaveAGoodOne/article/details/106355608

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

笔者用的是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>

HaveAGoodOne

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
浏览器变记事本或富文本-笔记

浏览器变记事本或富文本-笔记笔者用的是360极速版在浏览器的地址栏输入如下代码，即可得到一个可编辑文本的编辑器data:text/html, <html contenteditable>data:text/html, <textarea style="font-size: 28px;color: #535ede; width: 100%; height: 100%; bo
复制链接

扫一扫

专栏目录