Gem 新写的 ueditor rails integration

jasl · April 01, 2013 · Last by jasl replied at November 05, 2017 · 12465 hits

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 不过收费

强力顶!

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

@windxj 额。。。

挖个自己的坟... 把 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 已经不维护了...不知道滋瓷不滋瓷

Reply to 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 以后的版本吗?

Reply to cysh

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

Reply to jasl

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

Reply to cysh

等下我操作下哈

Reply to cysh

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

Reply to jasl

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

Reply to cysh

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

Reply to jasl

已经注册了

Reply to cysh

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

Reply to 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?

Reply to 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目录.

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

Reply to gxlonline

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

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

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

Reply to 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 文件大小没变,请高手指点下,有什么好的优化方案吗?

Reply to 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 这个代码的思路还是适用现在的

You need to Sign in before reply, if you don't have an account, please Sign up first.