Hello guys, I am working on a simple html,css and JavaScript editor with a compiler.
I need help how to create file with JavaScript at a button click.
Something like this code
<! Doctype html>
<html>
<body>
<textarea Id="text">
Some codes here...
</textarea>
<button onclick="create">New File</button>
</body>
</html>
I will appreciate your ideas…
If it’s in a browser that isn’t Chrome (and even then, only Chrome in specific configurations), you can’t: JS is sandboxed and cannot access the filesystem because that would be a huge security issue. The API for Chrome is here but is not usable out-of-the-box, a user has to install a Chrome extension to allow access to the local filesystem.
Well it might help us if you tell us what you are going to use it for?
I am working on a project that almost looks like codepen.
It is very basic and will not work in the browser like codepen does but I am going to turn it into an apk for andriod phones.
Thanks for your reply that looks beautiful.
But I am finding it hard to get how the filesystem works because my knowledge level on coding is very basic though I have read on filesystem before.
What I am doing is write an html editor that have the ability to compile html,css and JavaScript onkeyup.
It is a simple project.
My intention is to make it an apk for andriod phones.
Is it possible to attach files to post over here.
That is somewhat different, as it isn’t a browser. How are you packaging this? If it is via Cordova, then you use this:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/index.html
Which allows you to access the device filesystem. This is based on the deprecated JS FileSystem API. It works the same way – the plugin shows what the different storage location directory paths are, and this article may be helpful in showing you how the API works.
This is what I am working on.
JAVASCRIPT
app.js
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code"). contentWindow.document;
try{
document.body.onkeyup = function (){
code.open();
code.writeIn(html.value + "<style>" + css.value + "</style>" + "<script>" + js.value + "</style>" );
code.close();
}
}//End of try...
catch(err){
alert(err);
}
}//End of compile..
compile();
HTML
Index.html
<!Doctype html>
<html>
<head>
<title>HTML editor</title>
<head>
<body>
<textarea Id="html">
</textarea>
<textarea Id="css">
</textarea>
<textarea Id="js">
</textarea>
<!--Add iframe to display results-->
<iframe id="code">
</iframe>
<button onclick="Create_and_Save">Save</button>
<script src="app.js"></script>
<script>
function Create_and_Save(){
//What I want achieve is to create three individual file with their extensions.
//.html
//.css
//.js
//At a button click..
}
</script>
</body>
</html>
Hi,
I see your code already and I think that this one is not correct because you make an error in button onclick.
Yeah thanks, I noticed that. I add the document.getElementById(id) in the button onclick because that’s how I know I can get the value in the <textarea></textarea>.
I will edit the code and clear that part.
Any ideas on the file creating with the textarea value.
Look into learning node js for these types of things if you want to create / write files.
How are you packaging this code into an APK? This is very important information as it decides what system APIs you have access to that would allow you to save to storage.
OP is trying to build for Android @s0ukke05 , Node isn’t relevant here.
@DanCouper packaging into APK isn’t a problem.
I will do that with Driodscript.
What I mean is that knowing what you are using to pack the JS into something that will work on Android is important. Accessing the filesystem is a system-level operation, the framework you use has to have a very specific API built in that allows it to bridge between the JS code and the system code, and that API is, unfortunately, going to be different for every framework. There isn’t a common way to do it. I’ve posted two links for two different APIs (Chrome browser and Cordova), neither of which will apply in this case and neither of which work (sorry!).
Have you looked at the tutorial on saving files?
http://androidscript.org/droidscript/tutorials/?tutorials=9_WritingToAFile
Thanks it worked for me.