浏览器通过js打开文件，新建文件，静默实时保存文件

news2024/11/17 21:51:49

资源，点击下载

在线访问Txt Markdown 😝😝😝😝😝😝

新建文件后，可以直接保存文件，不需要再次下载文件，也只有第一次保存时候才会出现确认弹窗

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./mardown.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif;
            -webkit-font-smoothing: antialiased;
        }
       
        #mian {
            width: 50%;
            min-width: 640px;
            height: 100vh;
        }

        #content {
            width: 50%;
            height: 100vh;
            min-width: 640px;
            outline: 1px solid #eaeaea;
            padding:10px;
        }

        #leftBox {
            background: #ecf0f5;
            width: 35px;
            height: 100%;
            text-align: left;
            float: left;
        }

        #editor {
            border: 1px solid #eaeaea;
            outline: none;
            width: 600px;
            height: 100%;
            resize: none;
            background: rgb(250, 250, 250);
            line-height: 24px;
            font-size: 14px;
            float: left;
            padding: 10px 8px;
            color: black;
            font-family: inherit;
            box-sizing: border-box;
        }

        #leftNum {
            height: 100%;
            width: 100%;
            resize: none;
            outline: none;
            overflow-y: hidden;
            overflow-x: hidden;
            border: 0;
            background: rgb(247, 247, 247);
            color: #999;
            line-height: 24px;
            font-size: 14px;
            padding: 10px 4px;
            text-align: right;
            font-weight: bold;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <nav class="nav" style="display: flex;">
        <a class="nav-link active" href="javascript:;" style="font-weight: bold;">Mardown</a>
        <a class="nav-link" href="javascript:;" id="new">新建</a>
        <a class="nav-link" href="javascript:;" id="open">打开</a>
        <a class="nav-link" href="javascript:;" id="save">保存</a>
        <a class="nav-link disabled">帮助</a>
    </nav>
    <div style="display:flex;width:100vw;">
        <div id="mian">
            <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
            <textarea id="editor" name="content"
                onscroll="getId('leftNum').scrollTop = this.scrollTop;"></textarea>
        </div>
        <div id="content" class="markdown-body"></div>
    </div>

    <!-- <button id="btn-choose-file">btn-choose-file</button>
    <button id="btn-save-as">btn-choose-file</button> -->
    <script src="./mardown.js"></script>
    
</body>

</html>

mardown.js

var defaultvalue = `# 欢迎使用 Markdown 编辑阅读器

------

我们理解您需要更便捷更高效的工具记录思想，整理笔记、知识，并将其中承载的价值传播给他人，**Cmd Markdown** 是我们给出的答案 —— 我们为记录思想和分享知识提供更专业的工具。 您可以使用 Cmd Markdown：

> * 整理知识，学习笔记
> * 发布日记，杂文，所见所想
> * 撰写发布技术文稿（代码支持）
> * 撰写发布学术论文（LaTeX 公式支持）

![cmd-markdown-logo](https://www.zybuluo.com/static/img/logo.png)

除了您现在看到的这个 Cmd Markdown 在线版本，您还可以前往以下网址下载：

### 7. 绘制表格

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | \$1600 |   5     |
| 手机        |   \$12   |   12   |
| 管线        |    \$1    |  234  |

`;
//文本编辑器=============================================
function getId(obj) {
    return document.getElementById(obj);
}
var editor = getId('editor');
var prevDiv = getId('content');;
var prevView = (txt) => {
    prevDiv.innerHTML = marked.parse(txt)
}
const mardownEdi = function (domid, prevdomid) {
    var num = "";
    editor.value = defaultvalue;
    prevView(defaultvalue);
    function keyUp() {
        var str = editor.value;
        str = str.replace(/\r/gi, "");
        str = str.split("\n");
        n = str.length;
        line(n);
    }
    function line(n) {
        var lineobj = getId("leftNum");
        for (var i = 1; i <= n; i++) {
            if (document.all) {
                num += i + "\r\n";//判断浏览器是否是IE
            } else {
                num += i + "\n";
            }
        }
        lineobj.value = num;
        num = "";
    }
    editor.addEventListener(keyUp, function () {
        keyUp();
    }, false);
    editor.addEventListener('input', function () {
        // document.getElementById('content').innerHTML =
        //     marked.parse(this.value);
        prevView(this.value);
    }, false);
}
mardownEdi("#editor", "content")

let fileHandle;
const fileEdiObj = {
    openFile: (btnId) => {
        const BtnOpenFile = getId(btnId);
        BtnOpenFile.addEventListener('click', async () => {
            [fileHandle] = await window.showOpenFilePicker();
            const fileBlob = await fileHandle.getFile()
            editor.value = await fileBlob.text()
            prevView(editor.value);
        });
    },
    newFileHandler: async () => {
        const options = {
            types: [
                {
                    description: "确认保存文件",
                    accept: {
                        'text/plain': ['.txt'],
                    },
                },
            ],
        };
        return await window.showSaveFilePicker(options);
    },
    newFile: (btnId) => {
        const BtnOpenFile = getId(btnId);

        BtnOpenFile.addEventListener('click', async () => {
            fileHandle = await fileEdiObj.newFileHandler();
            editor.value = ''
            prevView('');
        });
    },
    writeFile: async function (btnId) {
        const BtnSaveFile = getId(btnId);
      
        BtnSaveFile.addEventListener('click', async () => {
            // createWritable()创建一个可写流对象WritableStream
            var contents = editor.value;
            console.log("editor.value",editor.value)
            if(!fileHandle){
                fileHandle = await fileEdiObj.newFileHandler();
            }
            const writable = await fileHandle.createWritable();
            // 通过管道将数据传输到文件
            await writable.write(contents);
            // 管道使用完毕后需要关闭
            await writable.close();
        });

    }
}
//绑定点击事件
fileEdiObj.openFile("open");
fileEdiObj.newFile("new");
fileEdiObj.writeFile("save");