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

原创
2016/05/10 02:06
阅读数 232

转自: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}}

效果截图如下:

截图1

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

截图2

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

展开阅读全文
打赏
2
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
2
分享
返回顶部
顶部