How can I open a file into Ace text editor?
Question
How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
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") <!DOCTYPE html> <html lang="en"> <head> <title>ACE HTML Editor</title> <!-- Put editor language eg: 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"><!DOCTYPE html> <html> <head lang=""> <meta charset=""> <link type="text/css" rel="stylesheet" href=""> <!-- CSS Stylesheet --> <link type="image/x-icon" rel="shortcut icon" href=""> <!-- Favicon --> <title></title> </head> <body> <p>Ace HTML Editor</p> </body> </html></div> <!-- In this div, put filler text --> <!-- use < for < --> <script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2019-11-23 19:43:05
You can use the file input element as follows:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I download contents from Ace text editor?
How to use ACE editor to edit and save a file
How to display file content in Ace Editor
How can I remove the first doctype tooltip of the ace-editor in my html-editor?
How to load ace editor
How to save all text from Ace editor in WT?
Why can't I embed Ace Editor into WebView?
How to evaluate code in ace editor
how can i open a text file from php using fileselector
Ace editor read php file gets commented
Related Tags