Question

如何使用Ace文本编辑器打开带有扩展名（例如HTML，CSS和js）的本地文件？我想有一种方法可以设置一个打开文件选择器的按钮，您可以打开一个选择器，然后它会打开文件供您编辑。这是我现在用于Ace的代码。

Random DiceNumber = new Random();
int Dice1Value = DiceNumber.Next(1, 7);

 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")

Answer 1

您可以按如下方式使用文件输入元素：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ACE HTML Editor</title>
        <style type="text/css" media="screen">
            #editor {
                position: absolute;
                top: 3em;
                right: 0;
                bottom: 0;
                left: 0;
            }
        </style>
        <meta charset="UTF-8">
        
    </head>
    <body>
        <div id="editnav">
            <input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
            <input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
            <input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
        </div>
        <div id="editor"></div> 
        <script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var editor = ace.edit("editor", {
                theme: "ace/theme/monokai",
                mode: "ace/mode/html",
                placeholder: "choose file to edit"
            }); 
            function openCode(files) {
                var file = files[0]
                if (!file) return;
                var modelist = ace.require("ace/ext/modelist")
                var modeName = modelist.getModeForPath(file.name).mode 
                editor.session.setMode(modeName)
                reader = new FileReader();
                reader.onload = function() {
                    editor.session.setValue(reader.result)
                }  
                reader.readAsText(file) 
            }
        </script>
    </body>
</html>

如何在Ace文本编辑器中打开文件？

1 个答案: