wysiwyg-rails 编辑器支援七牛云存储
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app/assets
lib
.gitignore
.travis.yml
Gemfile
LICENSE
README.md
Rakefile
wysiwyg-rails-qiniu.gemspec

README.md

wysiwyg-rails-qiniu

wysiwyg-rails-qiniu 是基于 wysiwyg-rails制作, 上传的资源直接支持七牛云存储 在使用该gem包前,你得会使用七牛云存储

安装

添加下面代码到你的 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进行自定义配置