活動管理員文本編輯器圖像上傳

Question

我正在使用主動管理員gem來控制管理員的活動。 我有一個名為CustomPage的頁面，我的輸入是標題（字符串）和內容（文本）。 對於內容，文本編輯器將出現在管理員頁面中。 在里面我可以插入圖像。 它是這樣的。 在此處輸入圖片說明

有什么辦法，我可以修改它..像給一個，並搜索圖像的本地化..像我們在積極的行政管理。

還是有一種方法可以編輯此文本編輯器。（我的意思是在此文本編輯器中使用回形針將圖片上傳到文件中。.而不是作為單獨的字段。）

Answer 1

是！！！ 寶石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 ，創建指向您要從中獲取圖像的URL的路由。 就我而言：

get 'gallery' => 'photos#gallery'

在您的控制器中添加:layout => false以正確渲染圖片庫。 就我而言，它將在photos_controller.rb ：

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

然后，您可以創建和設置圖庫彈出窗口的樣式並設置其樣式，以根據需要選擇圖像。 這是我所做的摘錄。 關鍵當然是不要忘記使用JS腳本將信息發送回編輯器。 就我而言，它將位於“視圖”>“照片” <“ 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>

當然，您可以根據需要對要獲取的照片進行排序和過濾。 當然，您也可以根據需要使用樣式和創建畫廊彈出窗口。

在圖像選擇器中，您的源字段旁邊將帶有一個瀏覽圖標：

在此處輸入圖片說明

單擊時，您應該擁有我們剛剛創建的小照片庫，您可以在其中選擇要使用的照片庫：

在此處輸入圖片說明

希望能幫助到你！

活動管理員文本編輯器圖像上傳

問題描述

2 個解決方案

解決方案1
5 已采納 2014-05-28 10:04:31

解決方案2
1 2014-05-28 08:32:07

活動管理員文本編輯器圖像上傳

問題描述

2 個解決方案

解決方案1 5 已采納 2014-05-28 10:04:31

解決方案2 1 2014-05-28 08:32:07

解決方案1
5 已采納 2014-05-28 10:04:31

解決方案2
1 2014-05-28 08:32:07