Question

如何将ace编辑器元素导入ember-cli项目。

试着跟随：

//Brocfile.js
app.import('bower_components/ace/src/ace.js');

现在在组件中我想从ace导入一些东西：

//custom-component.js
import oop from 'ace/lib/oop'
import TextHighlightRules from 'ace/mode/text_highlight_rules'

在 didInsertElement 中，我无法获得 oop 或 TextHighlightRules

有什么想法吗？

Answer 1

我发现安装Ace很棘手，因为它希望能够在运行时根据需要加载其JS文件。这意味着您需要在构建输出中保持Ace JS目录结构的完整性。

所以我在这里做了什么＆＃34; import＆＃34; Ace编辑器，使用ace-builds（版本1.2.2）进入ember-cli（版本1.13.8）项目。

1）使用命令bower install ace-builds --save将ace-builds分发添加到 bower_components 目录。这应该使用新的依赖项更新 bower.json 文件。 / p>

2）如managing dependencies上的Ember CLI文档中所述，确保使用命令npm install broccoli-funnel --save-dev

安装 broccoli-funnel

3）将var Funnel = require('broccoli-funnel');插入下面显示的 ember-cli-build.js 。

4）插入var extraAssets =行并将extraAssets传递给app.toTree，如下所示。

5）将<script src="assets/ace/ace.js"></script>添加到{{content-for 'body'}}行正下方的应用 index.html 文件中。

运行应用时，此构建将导致创建全局window.ace。我建议你使用调试器来确保它在那里。

这是我的 ember-cli-build.js 文件的样子（在早期版本的ember-cli中，这被称为 Brocfile.js ）

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var Funnel = require('broccoli-funnel');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });

  var extraAssets = new Funnel('bower_components/ace-builds/src-min-noconflict', {
    srcDir: '/',
    include: ['**/*.js'],
    destDir: '/assets/ace'
  });

  return app.toTree(extraAssets);
};

请注意，ace-builds附带了各种版本。在这里，我选择了 src-min-noconflict 构建，但您可以选择其中一个。

Answer 2

不幸的是，Ace并没有使用与Ember CLI相同的模块系统（据我所知），因此您无法使用ES6模块语法*从中导入。最好的办法是使用全局ace对象来完成您需要做的事情。

*您可能能够使用ES6模块语法导入。转换后，Ember CLI使用AMD的一个版本，可能与Ace的版本兼容。尝试执行import Ace from 'ace/ace'，看看是否会产生任何结果。如果没有，您将不得不使用全局对象。

Answer 3

您可以为Ember.js制作Ace Editor组件。还有详细的解释here。

以下是一个示例实现：

＆＃13;

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  data: {
    firstName: 'Heather',
    lastName: 'Brysiewicz',
    contact: {
      email: 'h.a.brysiewicz@gmail.com',
      phone: '815-246-2646',
      address: null
    }
  },

  rawData: function(key, val) {
    if (arguments.length == 2) {
      var data = null;
      try {
        data = JSON.parse(val);
      } catch (e) {}
      if (data) this.set('data', data);
    }
    return JSON.stringify(this.get('data'), null, 4);
  }.property('data')
});

App.AceEditorComponent = Ember.Component.extend({
  content: function(key, val) {
    if (!this.editor) {
      this.preset = val;
      return val;
    }
    if (arguments.length == 1) {
      return this.editor.getSession().getValue();
    }
    var cursor = this.editor.getCursorPosition();
    this.editor.getSession().setValue(val);
    this.editor.moveCursorToPosition(cursor);
    return val;
  }.property(),

  didInsertElement: function() {
    this.editor = window.ace.edit('editor');
    this.editor.setTheme('ace/theme/monokai');
    this.editor.getSession().setMode('ace/mode/javascript');

    var self = this;
    this.editor.on('change', function() {
      self.notifyPropertyChange('content');
    });

    if (this.preset) {
      this.set('content', this.preset);
      this.preset = null;
    }
  }
});

＆＃13;

/* Put your CSS here */

html,
body {
  margin: 20px;
}
pre {
  height: 120px;
}
#editor {
  height: 160px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.5.0/ember.js"></script>
  <script src='http://hbrysiewicz.github.io/assets/js/ace/ace.js'></script>
</head>

<body>

  <script type="text/x-handlebars">
    {{ace-editor content=rawData}}
    <div id='preview'>
      {{rawData}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="components/ace-editor">
    <pre id='editor'></pre>
  </script>
</body>

</html>

＆＃13;

将ace编辑器导入emberjs

3 个答案: