Gem 新写的 ueditor rails integration

jasl · 发布于 2013年4月01日 · 最后由 jasl 回复于 2015年6月18日 · 6732 次阅读
1107

Github repo: https://github.com/jasl/ueditor_rails

动机很简单:

  • 由于做面向国内用户,所以一直在用kindeditor,不过他生成的html非常的脏,无意尝试了ueditor,功能和kindeditor各有千秋,但是生成的html非常的干净,果断迁移过来。
  • 看了下github上ueditor的rails gem,都多少有些不完善

于是就动手写了一个,思路借鉴了 ckeditor 特点有:

  • 支持将ueditor的js后置(代码
  • 实现上传服务器端时无需skip_before_filter :verify_authenticity_token代码
  • 已经解决precompile问题
  • form helper和tag helper:ueditor_text_tag 'test1', 'text here', :id => 'xxxx', :width => 500, :toolbars => [["bold","italic","underline"]]或者f.ueditor_text :body这样
  • ueditor有些文件是gb2312编码,precompile可能会有问题,已经修复

下一步准备支持跨域的文件上传,主要是我的网站为了降低压力把assets放在又拍云上,自己有这个需求。

@dave 似乎之前看到你写过一个,看看我的哈~

共收到 66 条回复
41

很不错! 我的gem主要是方便集成ueditor,没有做更深入的rails集成,我倾向于js的东西还是在js里完成,写成helper不一定更方便。 不过大家有不同的需求,多多益善 :)

5173

mark一下

2511

一直没找到称心的富文本编辑器,目前kindeditor加自己写文件存七牛

1107

@as181920 我曾经也用kindeditor 替换原因帖子里也说了html不干净,ue的上传做的太复杂不如kind简单 其他我觉得都比他强了 有机会你可以尝试下 另 我目前看到最cool的是reactor 不过收费

1297

强力顶!

5093

大神,我来顶你啦~。。。

1107

@windxj 额。。。

1107

挖个自己的坟... 把ue升级到1.2.5.1,重新hack了一次 跨域上传实现 而且测试过了 这坑就算填完了。。。

445

修改app/assets/javascripts/ueditor_config.js.erb里面的toolbar,没效果的?

2973

看了演示教程,感觉简洁好多哦~~~

1107

@stephen 需要重新precompile assets才能在生产环境生效的,

445

@jasl 是开发环境

1107

@stephen 奇怪 我有测试过,没有问题 这个是我的玩具站 代码在https://github.com/jasl/a_rails_start_up_omakase ueditor的配置文件的代码https://github.com/jasl/a_rails_start_up_omakase/blob/master/app/assets/javascripts/ueditor_config.js.erb

确认一下是不是最新的0.0.4版,另外确认一下/public里没有/assets 有可能是之前precompile过的assets造成了缓存 另外就是检查一下开发模式下 页面的html 看看ueditor_config.js里代码的toolbars的配置是如何的,如果和配置的有出入,是不是之前自己也集成过ue?

最好能提供给我更详尽的信息,我好帮你debug

96

@jasl 麻烦问一下我上传图片的时候为什么报错: undefined local variable or method swf_imageuploader_path for #<#<...>: ...> 这个swf_imageuploader_path在什么地方初始化的? 我的dialogs_controller.rb代码: class UeditorRails::DialogsController < ApplicationController def image render :template => "ueditor_rails/dialogs/image" end ...

app/assets/javascripts/ueditor_config.js.erb: imageUrl: "<%= Rails.application.routes.url_helpers.ueditor_image_path %>"

5337

果断好东西, kindeditor有点脏

1107

#14楼 @felix 你是需要自己实现上传窗体? 如果使用UEditor自带的上传插件 是不需要实现DialogsController的 我已经实现 上传你只需要实现上传逻辑 如 https://github.com/jasl/a_rails_start_up_omakase/blob/master/app/controllers/ueditor/assets_controller.rb 就像一个普通的rails action一样 在config里的配置如 https://github.com/jasl/a_rails_start_up_omakase/blob/master/app/assets/javascripts/ueditor_config.js.erb

96

#16楼 @jasl 我如果不自己写一个DialogsController,在编辑器里面点击图片时就会报错: Started GET "/dialogs/image" for 127.0.0.1 ... Processing by ErrorController#page_404 as HTML 是不是其它配置有误?我把ueditor_config.js.erb和你的核对了一遍,基本一样,就是改了点小选项,类似字数统计、字符数等。

96

@jasl 点击工具栏上“图片”的时候应该不发送请求到后台吧?这里为什么有个/dialogs/image的get请求?

1107

#17楼 @felix 大概是你没有在routes里mount... 参见https://github.com/jasl/a_rails_start_up_omakase/blob/master/config/routes.rb#L14 如果你按照readme的步骤来做 应该是不会有问题的rails g ueditor_rails:install会handle好一切

1107

@felix 那个是为了解决跨域所做的折中

96

@jasl 我是按照readme的步骤来做的,rails g ueditor_rails:install 也执行过了,很奇怪啊,你能不能留个邮箱给我

96

@jasl mount UeditorRails::Engine => '/ueditor' 这个在install的时候自动生成了

1107

jasl9187@hotmail.com 因为是项目需要才做的 我有在两个项目里测试过 都没遇到过什么问题

1107

@felix 我刚刚重新建立了一个hello world工程测试 没有任何问题

96

@jasl 给你发了邮件详细说了一下安排配置的过程,麻烦你看一下

1107

#25楼 @felix 好的 非常感谢!

96

我的环境是:ruby1.9.3,rails3.2.11 前面用的ckeditor,会不会是因为和ckeditor冲突?

1107

@felix 邮件已经收到 sorry 我readme上写的require是错的 应该是require ./ueditor_config 然后是不需要UE.getEditor('editor');的 我这就更正一下readme

96

@jasl 还是不行,报同样的错: Started GET "/dialogs/image" for 127.0.0.1 ... Processing by ErrorController#page_404 as HTML

96

不加上 UE.getEditor('editor'); 还是不显示编辑器

1107

@felix get的url有问题,应该是/ueditor/dialogs/image 奇怪...我在一个新建的工程里按照你的操作回溯了一下 结果是正常的...

1107

#30楼 @felix rake routes一下呢 看看路由是怎么配置的

96

@jasl 我把readme的配置过程重新操作一遍,之前的内容不会影响新的操作吧

1107

#33楼 @felix 文件和路由配置是不会重新生成的 除非你删掉和去掉对应的行

Started GET "/ueditor/dialogs/image" for 127.0.0.1 at 2013-04-25 11:44:46 +0800
Processing by UeditorRails::DialogsController#image as HTML
  Rendered /Users/jasl/.rvm/gems/ruby-1.9.3-p392/gems/ueditor_rails-0.0.4/app/views/ueditor_rails/dialogs/image.html.erb (38.2ms)

这样就正确了...

96

Routes for UeditorRails::Engine: libs_swf_image_uploader GET /libs/swf_image_uploader(.:format) libs#swf_image_uploader libs_swf_upload GET /libs/swf_upload(.:format) libs#swf_upload libs_swf_upload_fp9 GET /libs/swf_upload_fp9(.:format) libs#swf_upload_fp9 libs_fclipboard_ueditor GET /libs/fclipboard_ueditor(.:format) libs#fclipboard_ueditor dialogs_attachment GET /dialogs/attachment(.:format) dialogs#attachment dialogs_image GET /dialogs/image(.:format) dialogs#image dialogs_wordimage GET /dialogs/wordimage(.:format) dialogs#wordimage dialogs_scrawl GET /dialogs/scrawl(.:format) dialogs#scrawl

96

@jasl 不好意思,应用部署在内网,只能手工敲一遍了,格式有点不对齐

1107

#36楼 @felix 这个routes是没有问题的 实际请求的时候需要加上routes里配置mount时候的prefix 所以你用浏览器访问http://localhost:3000/ueditor/dialogs/image是可以的 你能建立一个hello world工程来测试gem的正确么?感觉你那里的项目环境有点复杂,没有什么头绪

96

#37楼 @jasl http://localhost:3000/ueditor/dialogs/image 也不行,报错: ActionController::RoutingError - uninitialized constant DialogsController

script/rails:6 in require 我看你的script/rails 里面还多了几行配置,我的script/rails 里面是这样的: #!/usr/bin/env ruby

This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application.

APP_PATH = File.expand_path('../../config/application', FILE)

require File.expand_path('../../config/boot', FILE) require 'rails/commands'

1107

#38楼 @felix 都是标准的rails工程 这文件我没有改动过的,你最好先建一个hello world项目 来单独排查是不是因为环境引起的问题 感觉这么说 没什么头绪...

96

#39楼 @jasl 我新建了一个工程,重新按readme配置了,现在是GET “/ueditor/dialogs/image” 但是还是报错:ActionController::RoutingError(uninitialized constant DialogsController) 这是怎么回事啊,郁闷了~

96

@jasl 还有一个问题,f.ueditor_text :body 用这个的时候,始终报错:undefined method body for ...

1107

#41楼 @felix 难道是rails的问题么... @stephen 也在用这个gem,没有任何问题

96

#42楼 @jasl 我的环境是:ruby1.9.3,rails3.2.11 前面用的ckeditor,会不会是因为和ckeditor冲突?

1107

#41楼 @felix 有可能 但我觉得不太像 或许是内网的问题,我不晓得内网是怎么安装gem和bundle的,如果有可能的话 最好还是到外网去试验一下。这种问题 不直接拿项目代码来debug 我还真的没啥好的思路 或者 你可以采用gem 'ueditor_rails, :path => 'a/path/to/gem'的方式安装gem 我在本地环境是这么测试的,所以是没有问题的,这样的话,你需要git clone我的repo 然后拷到一个绝对路径之下 然后修改path的位置

96

#44楼 @jasl 我在内网建了一个gem in a box服务,所有的gem都上传到这个服务器上,内网机器都可以通过修改gem source从这里bundle install gem包。一直用这个没有什么问题。

1107

@felix 所以也不是包管理机制的问题了...那还有哪里的问题呢。。。你要是在北京的话我就去现场debug了。。。

96

#46楼 @jasl 呵呵,你太敬业了!我再检查一下吧,实在搞不定就算了。 对了,还有一个现象,我新建的工程里面,view里面选了哪个option就显示哪个,也不用new一个对象,但是在老的工程里面,一定要new才能显示编辑器,这也应该是个问题。

1107

#47楼 @felix 嗯 我就好解决问题 按道理 这个gem的设计思路和ckeditor很接近 - - 如果你能解决了 或者找到问题根源 回复我噻

96

@jasl 我没有在生成的代码里面找到image.js这个文件,它应该在哪个目录下?

96

#51楼 @jasl 找到了,谢谢!我在家里重新建个应用试一下这个gem包

96

@jasl 现在图片可以保存到数据库里面了,但是上传完成后无法点击确认按钮把图片显示到编辑器里面

1107

#53楼 @felix 检查log 有可能是上传失败,我在startup omakase里的参考实现是经测试完全可用的

96

@jasl 编辑器里面有个选择保存目录,这个我没有用到,我是上传到了数据库的一个字段里面,是不是这个问题

1107

#55楼 @felix ueditor的上传使用了swfupload这个组件,所以说你上传逻辑返回的结构体遵循他的协议即可,你也可以参考的我的实现https://github.com/jasl/a_rails_start_up_omakase/blob/master/app/controllers/ueditor/assets_controller.rb 关注返回的结构体即可

1107

#55楼 @felix http://ueditor.baidu.com/website/helper.html的16同样描述了ueditor需要返回的结构体

96

#57楼 @jasl 有个新问题,我上传的图片或者附件在提交前如果需要删除掉,应该在哪儿配置删除功能?

1107

#58楼 @felix 似乎ueditor没有实现这个,所以我也没有准备对应的实现

96

#59楼 @jasl 也就是说上传图片或附件的时候如果弄错了还不能删除,只能提交或者关闭当前页面重新上传?

1107

#60楼 @felix 对于ueditor现在的实现来说...是的 应该是关闭当前的插入图片窗体吧,那个插件提供了一个图片管理的tab,但是那个协议实在太复杂,而且依赖于业务了,所以如果你有更好的管理图片的需求,你需要查文档来实现那套协议

3093

我试着用这个,本来应用有一个上传的action photos/tiny_upload, 我配置写成这样好像不起作用

imageUrl: "<%= Rails.application.routes.url_helpers.photos_tiny_upload_path %>"

它还是会发到/ueditor/dialogs/image并报uninitialized constant DialogsController不知道是哪里还没有配置对

3093

发现rails 3.2.8会报错,使用3.2.13就好了

15941

不错。最近正要用这个,用的阿里云图片服务器

1107

#65楼 @app_sys 已经不维护了...不知道滋瓷不滋瓷

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