Question

我使用活动管理员gem来控制管理员的活动。我有一个名为CustomPage的页面，我的输入是标题（字符串）和内容（文本）。对于内容，文本编辑器将显示在管理员页面中。在里面，我可以插入图像。这是这样的.. enter image description here

有没有什么方法可以修改它...就像给出一个并搜索图像localy ..就像我们在活动管理中所做的那样。

或者有没有办法编辑这个文本编辑器..（我的意思是在此文本编辑器中使用回形针进行图片上传..而不是单独的字段。）

Answer 1

是!!! gem tinymce-rails-imageupload !!!

Answer 2

假设您正在使用TinyMCE（根据您的屏幕截图），您可以使用tinymce file_browser_callback选项来实现它：

JS：

tinymce.init({ 
    //your regular options
    plugins: "image", //and any other plugins you may have
    file_browser_callback: function(field_name, url, type, win) {
      tinymce.activeEditor.windowManager.open({
        title: "My file browser",
        url: "/gallery",
        width: 800,
        height: 600,
        buttons: [{
          text: 'Close',
          onclick: 'close',
          window : win,
          input : field_name
        }]
      }, {
        oninsert: function(url) {
          win.document.getElementById(field_name).value = url;
        }
      });
    }
});

在routes.rb中，创建指向您要从中提取图片的网址的路线。就我而言：

get 'gallery' => 'photos#gallery'

在您的控制器中添加:layout => false以正确渲染图库。在我的情况下，它将在photos_controller.rb：

def gallery
    respond_to do |format|
        format.html { render :layout => false }
    end
end

然后，您可以创建并设置用于从您希望的方式选择图像的图库弹出窗口。这是我做过的一段摘录。关键当然不要忘记使用JS脚本将信息发送回编辑器。在我的情况下，它将在视图＆gt;下照片＆lt; gallery.html.erb：

<head>
    <style type="text/css">
        //style your image gallery here
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(function(){
            $("li").on("click", function(){
                top.tinymce.activeEditor.windowManager.getParams().oninsert($(this).attr("data-url"));
                top.tinymce.activeEditor.windowManager.close();
            });
        });
    </script>
</head>

<body>
    <ul id="image_browser">
    <% Photo.order("updated_at desc").all.each do |a| %>
        <li data-url="<%= a.image.url %>">
            <%= image_tag a.image.url(:thumb) %>
            <p><%= a.title %></p>
        </li>
    <% end %>
    </ul>
</body>

当然，您可以按照自己想要的方式对照片进行排序和过滤。当然，您也可以按照自己的方式设置和创建图库弹出窗口。

在您的图片选择器中，您的源字段旁边会有一个小浏览图标：

enter image description here

点击后，您应该拥有我们刚创建的小照片库，您可以在其中选择要使用的照片库：

enter image description here

希望它有所帮助！

活动管理文本编辑器图像上载

2 个答案: