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

如果您想自己查看所有文件，请将所有文件压缩在此处

所以。。。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(测试版(。您可以在此处下载我现在压缩的内容。这是我的 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文件，在编辑器中打开它们，然后编辑它们。如果有人对我遇到的任何问题有解决方案，请随时发表评论。我现在正在寻找任何东西。谢谢堆栈溢出！

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

或使用

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

相关内容

最新更新

热门标签：