如何从 Ace 文本编辑器下载内容？

Question

我已经压缩了所有文件here如果你想自己查看所有文件

所以... Ace 文本编辑器对我来说设置起来真的很复杂。我以为我把一切都放下了，但没有。到目前为止，我已经很好地合并了下载按钮。我花了一段时间，但后来我采用了隐藏元素的方式并做到了这一点。

function downloadHTML() {
    var HTMLtextToSave = editor.getValue();
    var HTMLhiddenElement = document.createElement("a");

    HTMLhiddenElement.href = 'data:attachment/text,' + encodeURI(HTMLtextToSave);
    HTMLhiddenElement.target = '_blank';
    HTMLhiddenElement.download = 'untitled.html';
    HTMLhiddenElement.click();
}

在我尝试 CSS 之前，一切都很好。出于某些愚蠢的原因，getValue() 决定在每次看到井号标签 (#) 时都执行一次。它会下载所有代码，直到看到它，然后停止。我真的需要解决这个问题。我现在将我的项目称为 GridOff（测试版）。您现在可以下载我压缩的内容 here。这是我为 HTML 编辑器编写的 HTML 代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ACE HTML Editor</title>
        <!-- Put editor language e.g.: Ace HTML Editor -->
        <style type="text/css" media="screen">
            #editor {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
        <meta charset="UTF-8">
        <!-- Defines character set -->
        <link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
        <!-- CSS Stylesheet -->
        <link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
        <!-- Favicon -->
        <script type="text/javascript" src="../JavaScript/index.js"></script>
        <!-- JavaScript Index -->
    </head>
    <body>
        <div id="editnav">
            <input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
            <input type="button" id="openbtn" onclick="openCode()" value="Open">
            <input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
        </div>
        <input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
        <div id="editor">&lt;!DOCTYPE html>
&lt;html>
    &lt;head lang="">
        &lt;meta charset="">
        &lt;link type="text/css" rel="stylesheet" href="">
        &lt;!-- CSS Stylesheet -->
        &lt;link type="image/x-icon" rel="shortcut icon" href="">
        &lt;!-- Favicon -->
        &lt;title>&lt;/title>
    &lt;/head>
    &lt;body>
        &lt;p>Ace HTML Editor&lt;/p>
    &lt;/body>
&lt;/html></div>
        <!-- In this div, put filler text -->
        <!-- use &lt; for < -->
        <script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            editor.session.setMode("ace/mode/html");
            // editor.setTheme("ace/theme/themeHere")
            // editor.session.setmode("ace/mode/languageHere")
        </script>
    </body>
</html>

此外，我找不到一种方法让它只浏览 html 个文件，在编辑器中打开它们并进行编辑。如果有人对我遇到的任何这些问题有解决方案，请随时发表评论。我现在正在寻找任何东西。谢谢 Whosebug！

Answer 1

您需要使用 encodeURIComponent 而不是 encodeURI 来编码特殊字符，例如 # 或 &

或使用

href = URL.createObjectURL(new Blob(value)], { type: "text/plain" }));

如何从 Ace 文本编辑器下载内容？

How do I download contents from Ace text editor?

html

javascript

ace-editor