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

时间:2019-11-22 02:00:14

标签: javascript html ace-editor

如果您想自己查看所有文件,我会将所有文件压缩为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文件,在编辑器中打开它们并进行编辑。如果有人对我遇到的这些问题有解决方案,请随时发表评论。我现在正在寻找任何东西。谢谢StackOverflow!

1 个答案:

答案 0 :(得分:0)

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

或使用

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