wysiwyg-rails 编辑器支援七牛云存储

wysiwyg-rails-qiniu 是基于 wysiwyg-rails制作, 上传的资源直接支持七牛云存储
在使用该gem包前,你得会使用七牛云存储
传送门: Rails 进阶—— 云存储实战

安装

添加下面代码到你的 Gemfile:

gem "wysiwyg-rails-qiniu"

然后运行 bundle install.

将资源文件加入到你的 assets目录

在你的 application.css 文件中, 引入下列文件:

/*
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome
 */

如果你想使用黑色主题, 你可以加入 themes/dark.min.css 到application.css文件中.

在你的 application.js, 引入以下文件:

//
//= require froala_editor.min.js
//

如果你想使用更多功能插件 Available Plugins, 你应该将下面的这些文件加入的 application.js 和 application.css.
其中support_qiniu.min.js是必须要引入的,否则无法使用七牛云存储

// Include other plugins.
//= require plugins/support_qiniu.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/emoticons.min.js
//= require plugins/entities.min.js
//= require plugins/file.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quick_insert.min.js
//= require plugins/quote.min.js
//= require plugins/save.min.js
//= require plugins/table.min.js
//= require plugins/url.min.js
//= require plugins/video.min.js

/*
 *= require plugins/char_counter.min.css
 *= require plugins/code_view.min.css
 *= require plugins/colors.min.css
 *= require plugins/emoticons.min.css
 *= require plugins/file.min.css
 *= require plugins/fullscreen.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/image.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css
 */

同样的,如果你要使用中文语言包,请加入响应的js

// Include Language if needed
//= require languages/zh_cn.js

到目前位置你已经配置好编辑的基本资源,你需要重启rails服务器

初始化编辑器

详细文档请参见作者官网,提供了初始化代码 Froala WYSIWYG Editor official documentation.

这里提供部分示例代码, 在使用下面代码之前你应该需要知道如何生成七牛上传凭证

  $(function() {
    $('#edit').froalaEditor({
      language: "zh_cn",
      width: 900,
      heightMin: 300,
      heightMax: 500,
      requestWithCORS: false,

      //图片上传配置(必须)
      imageUploadDomain: "<%= Rails.application.config.qiniu_domain %>",    //七牛云存储空间域名地址
      imageUploadParam: 'file',
      imageUploadURL: 'http://upload.qiniu.com',                            //七牛上传服务器, 如果是海外服务器为 http://up.qiniu.com
      imageUploadParams: { token: '<%= @uptoken %>'},                       //上传凭证, 详细规则查看七牛官方文档
      imageUploadMethod: 'POST',
      imageMaxSize: 5 * 1024 * 1024,
      imageAllowedTypes: ['jpeg', 'jpg', 'png'],
      
      //文件上传配置(必须)
      fileUploadDomain: "<%= Rails.application.config.qiniu_domain %>",     //七牛云存储空间域名地址
      fileUploadParam: 'file',
      fileUploadURL: 'http://upload.qiniu.com',                             //同上
      fileUploadParams: { token: '<%= @uptoken %>'},                        //同上
      fileUploadMethod: 'POST',
      fileMaxSize: 20 * 1024 * 1024,
      fileAllowedTypes: ['*']
    });
  });

配置代码视图

使用代码视图加高亮效果,可加入以下代码,也可以使用codemirror-rails这个gem包

<link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" media="screen" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>

许可

wyg-rails项目是在麻省理工学院的许可。然而,为了使用Froala WYSIWYG HTML编辑器插件你应该购买一个许可证。
下面是许可链接,请支持源作者
Froala Editor has 3 different licenses.
For details please see License Agreement.

致谢

感谢Froala项目作者的贡献, 我在项目的原基础上增加了对七牛云存储的支持.
如果你需要使用其它的云存储平台,请使用wysiwyg-rails进行自定义配置