如何在Ember.js项目中使用在线文本编辑器

转自：http://blog.ddlisting.com/2016/05/10/ru-he-zai-ember-jsxiang-mu-zhong-shi-yong-zai-xian-wen-ben-bian-ji-qi/

网上有很多开发者想在Ember.js项目中使用ueditor但是遗憾的是ueditor并不支持Ember，如果直接嵌入ember项目的模板页面会出现服务链接等错误。并且在2.0版本之后模板中不允许使用script标签（当然你可以借助于组件实现）。

本人就尝试了多种方法，尝试使用整合了Nodejs的插件nodejs ueditor整合到ember项目，但是以失败告终！！

既然不能使用ueditor那就不用吧，因为ueditor的后台不支持ember（支持PHP、asp、JSP等）！

很幸运的是找到类似的替代品！！并且是完美支持Ember的！！

ember-froala-editor

这个插件使用起来非常简单，并且有丰富的功能！！！

只需要2句代码即可实现！

首先安装插件ember install ember-froala-editor
配置environment.js，在此文件中增加如下配置

// 其他配置省略
APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
      },
      'ember-froala-editor': {
        plugins  : true,
        languages: ['es','fr','de'],
        themes   : 'royal'
      }
// 其他配置省略

然后在模板中使用如下两行代码引用插件

{{! app/templates/application.hbs }}
{{froala-editor}}
{{froala-content}}

重启项目，访问：http://localhost:4200/

效果截图如下：

截图1

从截图上可以看到此编辑器拥有丰富的功能，足够日常使用了！

截图2

编辑器的高度会自动根据内容的大小自适应！真是太棒了！

来源：oschina

链接：https://my.oschina.net/u/565401/blog/672545

标签

ember.js