我可以在支持图像上传器的 Rails 3.1 应用程序中使用什么所见即所得编辑器？

Question

我尝试了这个 编辑器，但收到了很多错误，也许存在一些编辑器，我可以轻松安装和更新图像。

我的回答： 现在我使用这个编辑器，非常容易安装。

Answer 1

我将tinymce与 gem 'tiny_mce' 和 Carrierwave< /code> 用于图像上传。
我对tinymce的设置如下：

$(function() {
  tinyMCE.init({
    mode: "textareas",
    editor_deselector: "plain",
    theme: "advanced",
    plugins: "advimage,inlinepopups,save,autosave",
    external_image_list_url: '#{image_list_admin_static_images_url}',
    relative_urls: false,

    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect",
    theme_advanced_buttons22: "",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_blockformats: "p,h2,h3,h4"
  })
}

重要的部分是我的路线中的image_list_admin_static_images_url：

resources :static_images do
      get :image_list, :on => :collection
end

StaticImagesController中的方法看起来像：

 def image_list
    @image_list = "var tinyMCEImageList = #{StaticImage.image_list.to_json}"
    render :js => @image_list
 end

并且在位于模型中的image_list方法中：

 def self.image_list
    all.map{ |im| [im.alt, im.image.url] }
 end

这个设置非常适合我，ofc你需要根据您自己的需要定制它。希望这会对您有所帮助。 TinyMCE 是一个非常好的、强大的所见即所得编辑器。

正如评论部分中的 chech 建议的那样，您可以通过以下方式调整此解决方案以与 active_admin 一起使用：

要在活动管理中使用它，只需替换此解决方案的路由：
匹配“admin/model_name/:id/js_image_list”, :action => “js_image_list”，：控制器=> “管理员/模型名称”。然后在活动管理模型文件中创建一个名为 js_image_list 的操作。 tinyMCE.init 的配置为：external_image_list_url : "js_image_list"

Answer 2

看来tinymce肯定是受rails 3.1支持的。这是链接
http://rubygems.org/gems/tinymce-rails

您所要做的就是添加根据您的 Gemfile

gem 'tinymce-rails'

您可以将以下选项添加到 application.js，具体取决于您是否想使用 jquery

//= require tinymce-jquery
//= require tinymce

我个人选择了 jquery，所以我将此行添加到与我的控制器/视图对应的 js.coffee 文件中

tinyMCE.init
  mode: 'textareas',
  theme: 'advanced'

如果您不想使用 jquery 你可以将此脚本添加到你的视图中

<script type="text/javascript">
  tinyMCE.init({
    mode: 'textareas',
    theme: 'advanced'
  });
</script>

Answer 3

我在使用 tinymce 和 Rails 资产管道时遇到了问题。我还没有找到一种方法来启动tinymce并增加字体大小。默认字体非常小。

如果您使用 twitter bootstrap，一个很棒的选择是：

https://github.com/jhollingworth/bootstrap-wysihtml5< /a>

如果你想要一些与 HTML5 兼容的东西，我会选择：

http://jejacks0n.github.com/mercury/

太棒了！