Gem 新写的 ueditor rails integration

jasl · 2013年04月01日 · 最后由 jasl 回复于 2017年11月05日 · 12485 次阅读

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 似乎之前看到你写过一个,看看我的哈~

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

mark 一下

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

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

强力顶!

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

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

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

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

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

@jasl 是开发环境

@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

@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 %>"

果断好东西,kindeditor 有点脏

#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

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

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

#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 好一切

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

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

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

[email protected] 因为是项目需要才做的 我有在两个项目里测试过 都没遇到过什么问题

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

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

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

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

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

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

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

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

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

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

#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)

这样就正确了...

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

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

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

#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'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jasl 回复
Bundler could not find compatible versions for gem "rails":
  In Gemfile:
    rails (~> 5.1.4)

    ueditor_rails was resolved to 0.0.4, which depends on
      rails (~> 3.2.1)

以后不打算支持一下 Rails 3.2.1 以后的版本吗?

cysh 回复

理论上把 gemspec 的版本约束放开,新版本应该可以跑得很愉快,不过那 Gem 我已经不维护了

jasl 回复

可不可以把我加到contributors collaborators 里…

cysh 回复

等下我操作下哈

cysh 回复

邀请你了,你来玩吧,不过其实按规矩的话 你提 PR 就好了 给我你的邮箱,我可以把你加到 gem 的 owner 去

jasl 回复

[email protected] 好哒,我明天先跑一下

cysh 回复

你这个邮箱要先在 https://rubygems.org/ 注册

jasl 回复

已经注册了

cysh 回复

可以了 你有 push gem 的权限了,剩下的你自己玩吧

jasl 回复

谢谢大佬~~

@jasl 大佬请教点问题~ 我在 test (Rails 5.1.4) 的项目中,使用 gem 会有资源引用的一些问题,如下:

app/assets/javascripts/ueditor_rails/_config.js.erb

该配置文件中的 asset_path('ueditor/') 路径找不到,修改为assert_path('asset/ueditor')后,demo 可以正常运行。 请问 merge 这个修改,会不会影响到 Rails 3.2.1 以前的项目使用这个 gem?

cysh 回复

不道,不过 3.x 可以放弃支持了,太老了

@jasl @cysh

在开发环境下,一切正常。部署在生产环境下,编辑框显示不出来。

production.log 有如下提示

...
ActionController::RoutingError (No route matches [GET] "/assets/ueditor/lang/zh-cn/zh-cn.js"):
...
ActionController::RoutingError (No route matches [GET] "/assets/ueditor/themes/default/ueditor.css"): 
...

好像是资源引用地址有问题,在 ueditor_config.js.erb 中有如下配置

//语言配置项,默认是zh-cn。
//,lang:'zh-cn'
//,langPath:URL +"lang/"

//主题配置项,默认是default。
, theme: 'default', themePath: "<%= asset_path 'assets/ueditor/themes/' %>"

以前用 kindeditor 时,在生产环境时,需要先执行

  rails kindeditor:assets
# Precompiling assets不再自动从vendor/assets和lib/assets拷贝非JS/CSS文件. 
# 此方法可将kindeditor自动拷贝到你的public/assets目录.

请问该怎么解决这个问题,谢谢了。

gxlonline 回复

没有 digest,其实 ueditor-rails 里面我当初集成的 ueditor 是我魔改过的版本,所以才能完美支持 Assets pipeline...

当然如果用我做的版本也不好使,我也不知道怎么折腾了... 换 ckeditor 啥的吧

@jasl 谢谢回复,重新找了个 markdown 编辑器 md_simple_editor。

gxlonline 回复

markdown 的问题是表达能力太弱。。。论坛回复这级别算是够用了,但是混合排版之类,还是得上 ckeditor tinymce ueditor(其实我都不知道他还活着没。。。)这种大块头,另外我现在挺看好 https://github.com/quilljs/quill

@jasl

又换 CKeditor(为什么是又呢)

用了 ckeditor,在生成环境下编译后的 application.js 文件高达 780K。 虽然有 turbolinks,但直接影响到首次打开网页的速度。

app/assets/javascripts/javascript.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require ckeditor/init

ckeditor 的说明

To reduce the asset precompilation time, you can limit plugins and/or languages to those you need:

# in config/initializers/ckeditor.rb
Ckeditor.setup do |config|
  config.assets_languages = ['en', 'fr']
  config.assets_plugins = ['image', 'smiley']
end

设置后 js 文件大小没变,请高手指点下,有什么好的优化方案吗?

gxlonline 回复

Assets pipeline 有一个编译规则,就是所有文件名为 application 的,都会被编译,所以你大可把 ckeditor 相关的 JS(当然 CSS 也是同理的)单放到一个文件里(比如 editor/application.js),然后在需要编辑器的页面里,引用他。

另外你也可以自己把 Ckeditor 的文件引入到 AP 的 Precompile 列表去,这个看看文档就好了

当然和 turbolinks 配合的时候可能需要在 <script> 标签的放置位置有要求,我前端苦手这个没有太多研究。

然后封个 helper 方便使用也可,类似 https://github.com/jasl/a_rails_start_up_omakase/blob/master/app/helpers/application_helper.rb#L100 这个代码的思路还是适用现在的

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