[实验] 浏览器即文本编辑器

 

浏览器即文本编辑器

 
一、前言
        在我们工作中，尤其是使用浏览器的时候，或许你在查资料，亦或许你在浏览其他东东，发现一些有趣的内容你总想把它记下来；接下来你的操作是，切换电脑桌面上右键菜单，新建文本编辑器，再切换回浏览器，找到要复制的内容，再切换到文本编辑器，粘贴进去，保存。是不是已经被这些繁琐的操作搞晕了，不要担心，接下来我介绍一项前端的技术，瞬间将浏览器变为文本编辑器。当然你会说，哇，你们的这些技术太高大上，我不会啊。别急，就像把大象装进冰箱一样，炒鸡简单。
 
二、操作步骤

    话不多说，先看看效果

        

 
    Step：
    1. 打开浏览器
    2. 在地址栏处输入：data:text/html, <html contenteditable>
    3. 在下方空白处就可以输入或复制内容了
        那你有话要说了，我想保存怎么办。那你再当前浏览器 Ctrl + S 像保存word 文档一样操作下试试。那你又说了，这些代码我记不住怎么办，好吧，我也记不住，那我是怎么解决问题呢？下面以 Chorme 浏览器为例（其他浏览器差别不大）：
        看到上面的步骤了吧，就是在浏览器中新建一个标签，完后把那串代码塞进去。用的时候直接打开标签即可，有木有感觉很强大？哈哈哈以后妈妈再也不用担心我没文本编辑器了，我在悄悄告诉你个秘密，你还可以将图片也复制进去，快去试试吧。
 
三、总结
    Over，讲完了。这主要用到了前端技术中 " contenteditable " 属性，它可以将浏览器中任意标签变为可编辑的富文本编辑框。好了，讲完了，希望这一小小技术，可以对你的工作有那么一丢丢帮助！
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2019-04-30 16:14  NCat  阅读(305)  评论(0)    收藏  举报