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

tkvern · 2016年02月25日 · 最后由 tkvern 回复于 2016年07月21日 · 2633 次阅读

wysiwyg-rails-qiniu

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.cssapplication.css文件中.

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

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

如果你想使用更多功能插件 Available Plugins, 你应该将下面的这些文件加入的 application.jsapplication.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进行自定义配置

共收到 4 条回复

Froala 太贵,用不起啊。

而且,token 直接这样传递给前端,token 的有效期设置为多少呢?最好是有一个获取 token 的接口,每次要上传的时候获取一下 token 。

#1楼 @holysoros token 的值有服务器生成,过期时间可在上传凭证中配置。

 def uptoken

      put_policy = Qiniu::Auth::PutPolicy.new(
        "<你的空间名称>",                    # 存储空间
        nil,                           # 最终资源名,可省略,即缺省为“创建”语义
        1800,                          # 相对有效期,可省略,缺省为3600秒后 uptoken 过期
        (Time.now + 30.minutes).to_i  # 绝对有效期,可省略,指明 uptoken 过期期限(绝对值),通常用于调试,这里表示半小时
      )

      uptoken = Qiniu::Auth.generate_uptoken(put_policy) #生成凭证

end

froala虽然提示收费,但是不影响功能使用。只会在编辑器的上面显示一个未激活,只要加段监听代码去除显示的DOM元素即可

@tkvern 我在上传图片的时候 浏览器里debug会报这个错误

No route matches [GET] "/events/oaxxxx4o0.bkt.clouddn.comFrCWCR8n8Jhxl8yd7KoAMcnJZFmE"

我在七牛里看了一下 图片都已经上传上去了 ,上传文件同样会生成一样的地址,但是就不会报错 为什么呢?需要在route.rb里设置什么吗

======================== 问题解决了 , 需要在qiniu.rb 里这样设置七牛域名: Rails.application.config.qiniu_domain = "http://oaxxxxf4o0.bkt.clouddn.com/"

#3楼 @roccia 地址拼接问题

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册