Alloyui Ace编辑器读写文件

Question

如何使用 ace 编辑器 ( alloyoui ) 读写 html 或 php 文件，在这个例子中，我只是获得了编辑的价值，而不是从文件中，我已经完成了查看文档但没有了解如何从文件中读取和写入代码。

例子

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();
        }
      );
    }
  }
);

如何调用文件代码？或者这只能更改 value: 'alert("Write something here...");'whit 文件 path/url?

谢谢

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 并将它们加载到 AceEditor 中。使用 <input type="file" /> 允许用户上传文件。上传文件后，将 AceEditor 的 value 设置为文件的内容。

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.');
      }
    }
  });
});

您还可以尝试根据文件的 MIME 类型猜测编辑器应该使用的 mode：

aceEditor.set('mode', file.type.replace(/^(text|application)\/(x-)?/, ''));

要下载编辑后的文件，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);
});

这是一个包含以上所有内容的可运行示例 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>

Alloyui Ace编辑器读写文件

Alloyui Ace editor read and write file

ace-editor

alloy-ui