如何在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/

效果截圖以下：

從截圖上能夠看到此編輯器擁有豐富的功能，足夠平常使用了！

編輯器的高度會自動根據內容的大小自適應！真是太棒了！