在浏览器里面可以随时调出记事本,而且内容自动保存不怕丢失
原理其实很简单
插件扩展
图标进入扩展后台添加插件
,填写名称,选择本地代码
后确定即可触发词
选项需要说明下,可以简单理解为插件的唯一标识,输入这个词后就会调用插件。建议英文+数字
代码分为html、css、js三部分,和平时写前端代码基本一样。 不过有几点需要说明下:
<html>
<head>
<title>记事本</title>
<script src="/vendor/codemirror/lib/codemirror.min.js"></script>
<script src="/js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="/vendor/codemirror/lib/codemirror.css">
<script src="/vendor/codemirror/keymap/sublime.js"></script>
</head>
<body>
<textarea id="code" name="code" style="width:100%;height:calc(100vh - 50px);background:#f5f5f5;border: 1px solid #f0f0f5"></textarea>
</body>
</html>
js代码重点有2部分
创建codeMirror编辑器并添加change
事件监听
editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true,
extraKeys: {
"Ctrl-Q": function(cm){
cm.foldCode(cm.getCursor()); }},
mode: "markdown",
keyMap: "sublime",
});
editor.on("change",function(instance, changeObj){
textChangeHandler(instance.getValue())
});
var storageKey = 'note_storage'
var value = 'test'
// 写入本地存储
localStorage[storageKey] = value
// 从本地存储读取数据
value = localStorage[storageKey]
完整的js代码如下
var storageKey = 'note_storage'
var editor
var default_text =
'1. 每次输入内容后会自动保存的,下次打开内容不会丢失的\n' +
'2. 内容只保存在本地,插件备份功能不会备份该内容,请不要存储重要信息\n' +
'3. 编辑器支持sublime快捷键'
function textChangeHandler(text){
if(typeof text === undefined || text === null){
text = ''
}
localStorage[storageKey] = text
}
function init(){
var text = localStorage[storageKey]
//console.info('get ' + text)
if(typeof text != undefined && text != null && text != ''){
editor.setValue(text)
}else{
editor.setValue(default_text)
}
}
(function(){
editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true,
extraKeys: {
"Ctrl-Q": function(cm){
cm.foldCode(cm.getCursor()); }},
mode: "markdown",
keyMap: "sublime",
});
init()
editor.on("change",function(instance, changeObj){
textChangeHandler(instance.getValue())
});
})()
系统
分类,添加记事本
即可最后总结下,写个真的可以使用的浏览器记事本还是很简单的。当然了这主要还是得益于codeMirror的强大功能。大家都可以来试试吧
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/193220.html原文链接:https://javaforall.cn