Question

如何使用ace编辑器（alloyoui）读取和写入html或php文件，在示例中我只是从文件中获取编辑的值，我已经完成了查看文档，但没有得到如何从文件读取和写入代码。< / p>

例如

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文件路径/ url？

感谢

Answer 1

You cannot write to or read system files with JavaScript.但是，您可以通过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);
});

这是一个包含所有上述功能/代码的可运行示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Alloyui Ace编辑器读写文件

1 个答案: