Alloyui Ace editor read and write file - ace-editor

Question

How read and write html or php file using ace editor ( alloyoui ), in the example i just get value to edit not from file and i have done to see the documentation but not get how read and write code from file.
example
YUI().use(
'aui-ace-editor',
function(Y) {
var editor = new Y.AceEditor(
{
boundingBox: '#myEditor',
height: '200',
mode: 'javascript',
value: 'alert("Write something here...");',
width: '700'
}
).render();
var mode = Y.one('#mode');
if (mode) {
var contents = {
javascript: 'alert("Write something here...");',
json: '{"value": "Write something here..."}',
php: '<?php echo "Write something here..."; ?>',
xml: '<value attr="something">Write something here...</value>'
};
var currentMode = 'javascript';
var updateValue = function() {
editor.set('value', contents[currentMode]);
};
mode.on(
'change',
function(event) {
currentMode = this.val();
editor.set('mode', currentMode);
updateValue();
}
);
}
}
);
how call the file code? or this can be done only change the value: 'alert("Write something here...");'whit file path/url?
thanks

Answer 1

You cannot write to or read system files with JavaScript. However, you can kind of write to files by reading the contents of uploaded files and loading them into the AceEditor. Use an <input type="file" /> to allow the user to upload the file. Once the file is uploaded, set the AceEditor's value to be the file's contents.
AUI().use('aui-ace-editor', function(A) {
var aceEditor;
var fileInput = A.one('#fileInput');
fileInput.on('change', function(event) {
var file = fileInput.getDOMNode().files[0];
if (file) {
// Other types may also be appropriate here:
if (file.type.startsWith('text/') || file.type.startsWith('application/')) {
var reader = new FileReader();
reader.onload = function (onloadEvent) {
if (!aceEditor) {
aceEditor = new A.AceEditor({
/* ...your AceEditor config... */
mode: 'text',
render: true
});
}
aceEditor.set('value', onloadEvent.target.result);
}
reader.onerror = function (onerrorEvent) {
alert('File could not be read. Aborting.')
}
reader.readAsText(file, "UTF-8");
}
else {
alert('File does not contain text. Aborting.');
}
}
});
});
You can also attempt to guess the mode that the editor should use from the file's mime type:
aceEditor.set('mode', file.type.replace(/^(text|application)\/(x-)?/, ''));
To download the edited file, you can use a data URI:
var downloadFileButton = Y.one('#downloadFileButton');
downloadFileButton.on('click', function(clickEvent) {
var downloadFileLink = Y.Node.create('<a href="data:' +
fileType + ';charset=utf-8,' +
encodeURIComponent(aceEditor.get('value')) +
'" download="' + fileName + '" style="display: none;" />');
var bodyElement = Y.one('body');
bodyElement.appendChild(downloadFileLink);
downloadFileLink.getDOMNode().click();
bodyElement.removeChild(downloadFileLink);
});
Here's a runnable example with all of the above features/code:
YUI().use('aui-ace-editor', function(Y) {
var aceEditor;
var fileName;
var fileType;
var fileInput = Y.one('#fileInput');
fileInput.on('change', function(event) {
var file = fileInput.getDOMNode().files[0];
if (file) {
fileType = file.type;
// Other types may also be appropriate here:
if (fileType.startsWith('text/') || fileType.startsWith('application/')) {
fileName = file.name;
var reader = new FileReader();
reader.onload = function (onloadEvent) {
if (!aceEditor) {
aceEditor = new Y.AceEditor({
boundingBox: '#aceEditor',
mode: 'text',
value: 'Upload a file to begin editing.',
height: '200',
width: '700',
render: true
});
var downloadFileButton = Y.one('#downloadFileButton');
downloadFileButton.setStyle('display', null);
downloadFileButton.on('click', function(clickEvent) {
var downloadFileLink = Y.Node.create('<a href="data:' +
fileType + ';charset=utf-8,' +
encodeURIComponent(aceEditor.get('value')) +
'" download="' + fileName + '" style="display: none;" />');
var bodyElement = Y.one('body');
bodyElement.appendChild(downloadFileLink);
downloadFileLink.getDOMNode().click();
bodyElement.removeChild(downloadFileLink);
});
}
aceEditor.set('value', onloadEvent.target.result);
aceEditor.set('mode', fileType.replace(/^(text|application)\/(x-)?/, ''));
}
reader.onerror = function (onerrorEvent) {
alert('File could not be read. Aborting.')
}
reader.readAsText(file, "UTF-8");
}
else {
alert('File does not contain text. Aborting.');
}
}
});
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<input type="file" id="fileInput">
<div id="aceEditor"></div>
<button id="downloadFileButton" style="display: none;">Download File</button>
</div>