Question

我想在我的Ember应用程序中使用CKEditor。我和Ember是100％的n00b，但我到了那里。

我试图弄清楚这一点，但我无处可去:(

我曾尝试使用ember-ckeditor。最终导致编辑器抛出了一些net::ERR_NAME_NOT_RESOLVED错误，例如config.js和其他预期在资产文件夹中找到的“资产”。

我试过了ember-cli-ckeditor。与上述完全相同的问题。

这两个插件有相当蹩脚的文档。例如，我不知道如何提供自定义配置文件，CSS等。或者如果我想使用CkFinder怎么办？

上面两个插件在加载服务器时也会抛出一些折旧的警告，但是我不知道......

我终于尝试在vendor文件夹中手动包含ckeditor v4.5.6。然后我将其ember-cli-build.js包括在内app.import('vendor/ckeditor/ckeditor.js');：CKEDITOR.replace("content"); 我不确定这样做是否正确，如果是这样，我如何在控制器或组件中使用编辑器插件？

   context.com.sun.jndi.ldap.connect.pool=true </jaas:module> </jaas:config>按照平时在Ember以外的地方？

请上学！

Answer 1

使用没有插件的ckeditor（创建自己的组件）：

使用bower安装ckeditor：
```
bower install ckeditor --save
```
安装broccoli-funnel，ckeditor的资产需要它：
```
npm install broccoli-funnel --save-dev
```

在你的ember-cli-build.js中：

位于文件重新排列渠道的顶部

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

在应用程序的选项中，从指纹识别中排除ckeditor的资产：

var app = new EmberApp(defaults, {
  fingerprint: {
    exclude: ['assets/ckeditor/']
  }
});

导入ckeditor的js和资产：

app.import('bower_components/ckeditor/ckeditor.js');

var ckeditorAssets = new Funnel('bower_components/ckeditor', {
  srcDir: '/',
  destDir: '/assets/ckeditor'
});

/**
 * If you need to use custom skin, put it into 
 * vendor/ckeditor/skins/<skin_name>
 * Also, custom plugins may be added in this way 
 * (look ckeditor's info for details)
 * If you don't need custom skins, you may remove
 * ckeditorCustoms
 */
var ckeditorCustoms = new Funnel('vendor/ckeditor', {
  srcDir: '/',
  destDir: '/assets/ckeditor'
});

return app.toTree([ckeditorAssets, ckeditorCustoms]);

如果您的应用不在网站的根目录中，您可能需要在其他脚本之前将此脚本放在index.html的正文部分中：
```
<script type="text/javascript">
  window.CKEDITOR_BASEPATH = '/path-to/assets/ckeditor/';
</script>
```

创建一个组件。警告：这是我遗弃的宠物项目中的代码，我99％肯定它不会对您有效，并且＃34;＆＃34;因为缺少依赖项，因为它是为不同的html布局创建的。但我认为无论如何它可能会有所帮助。如果你想尝试复制粘贴它，这里有依赖项：

npm install --save-dev ember-browserify
npm install --save-dev sanitize-html

组件代码：

/* globals CKEDITOR */
import Ember from 'ember';
import layout from '../templates/components/md-ckeditor'; //component's name!
import SanitizeHTML from 'npm:sanitize-html';

export default Ember.Component.extend({
  layout: layout,
  classNames: ['input-field'],

  _editor: null,

  bindAttributes: ['disabled', 'readonly', 'autofocus'],
  validate: false,

  errorsPath: 'errors',

  init() {
    this._super(...arguments);
    const propertyPath = this.get('valueBinding._label');
    if (Ember.isPresent(propertyPath)) {
      Ember.Binding.from(`targetObject.${this.get('errorsPath')}.${propertyPath}`)
        .to('errors')
        .connect(this);
    }
  },

  didInsertElement() {
    var i18n = this.get('i18n');

    if (Ember.isPresent(this.get('icon'))) {
      this.$('> span').css('padding-left', '3rem');
    }

    this._setupLabel();

    this._editor = CKEDITOR.inline(this.element.querySelector('.ckeditor'), {
      skin: 'minimalist',
      toolbar: [
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Undo', 'Redo'],
        ['Bold', 'Italic', 'Strike'],
        ['Link', 'Unlink'],
        ['NumberedList', 'BulletedList', 'Blockquote'],
        ['Source']
      ],
      linkShowAdvancedTab: false,
      linkShowTargetTab: false,
      language: i18n.get('locale'),
      removePlugins: 'elementspath'
    });
    this._editor.on('instanceReady', (e) => {
      this._updateValidClass();
    });
    this._editor.on('change', (e) => {
      this.set('value', e.editor.getData());
    });
    this._editor.on('focus', (e) => {
      var label = this.$('> label, > i');
      label.addClass('active');
    });
    this._editor.on('blur', (e) => {
      var label = this.$('> label, > i');
      var text  = SanitizeHTML(e.editor.getData(), {
        allowedTags: []
      }).trim();
      if (text !== '') {
        label.addClass('active');
      } else {
        label.removeClass('active');
      }
    });
  },

  willDestroyElement()
  {
    this._editor.destroy();
    this._editor = null;
  },        

  id: Ember.computed('elementId', function () {
    return `${this.get('elementId')}-input`;
  }),

  validClass: Ember.computed('value', 'errors', function () {
    var errors = this.get('errors');
    if (errors && errors.get && errors.get('firstObject')) {
      return 'invalid';
    } else if (!!this.get('value')) {
      return 'valid';
    } else {
      return '';
    }
  }),

  validClassChanged: Ember.observer('validClass', function () {
    Ember.run.once(this, '_updateValidClass');
  }),

  _updateValidClass() {
    if (this._editor && this._editor.container &&         this._editor.container.$) {
      Ember.$(this._editor.container.$).removeClass('invalid         valid').addClass(this.get('validClass'));
    }
  },

  _setupLabel() {
    const label = this.$('> label, > i');
    if (Ember.isPresent(this.get('value'))) {
      label.addClass('active');
    }
  }
});

模板：

{{textarea
id=id
value=value
name=name
required=required
readonly=readonly
disabled=disabled
maxlength=maxlength
class="materialize-textarea ckeditor"
classNameBindings="validate:validate: validClass"
}}
<label for="{{id}}">{{label}}</label>
<small class="red-text">
     {{#if errors}} {{errors.firstObject}} {{else}} &nbsp; {{/if}}
</small>

Answer 2

检查下一个例子

https://github.com/ebryn/ember-ckeditor/blob/master/addon/components/ember-ckeditor.js

或下一个包ember-cli-ckeditor

https://www.npmjs.com/package/ember-cli-ckeditor

Cmbered在Ember中的使用

2 个答案: