在受保护的页面上使用 TinyMCE 和 RoR 上传图片

Question

我不需要具体的解决方案，但需要有人给我更接近的提示来解决我的问题。我在 rails 4 Intranet 应用程序上有一个 ruby，它受登录保护。在这个应用程序中，我有一个编辑页面，我也在其中使用了 TinyMCE。它能够为其提供一个 URL 将图片发送到的位置以进行上传（参见 here）。我用 CarrierWave 实现了上传例程，它在 TinyMCE 之外工作得很好。如果可能的话，我也会保留那个插件。但正如我所说，CarrierWave 目前不支持 TinyMCE 和异步上传。

那么您知道我如何使用正确的会话令牌（异步）上传图像吗？而图片URL不是保存数据库，而是在TinyMCE中显示的文本。有没有可以帮助我或其他任何东西的插件？如果您需要更详细的信息，请告诉我。

此致马可

Answer 1

您必须为 TinyMCE 使用 image plugin 并设置 file_picker 属性和回调，因此您可以附加来自 client-side 的文件，而不是 URL。

tinymce.init({
    // Include image plugin on plugin list
    plugins: [ 'image'],
    // Include image button on toolbar
    toolbar: ['image'],
    // Enable title field in the Image dialog
    image_title: true, 
    // Enable automatic uploads of images represented by blob or data URIs
    automatic_uploads: true,
    // URL of your upload handler
    // (YOU SHOULD MAKE AN ENDPOINT TO RECEIVE THIS AND RETURN A JSON CONTAINING: {location: remote_image_url})
    images_upload_url: '/text_images',
    // Here we add custom filepicker only to Image dialog
    file_picker_types: 'image', 
    // And here's your custom image picker
    file_picker_callback: function(cb, value, meta) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');

      input.onchange = function() {
        var file = this.files[0];

        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry.
        var id = 'blobid' + (new Date()).getTime();
        var blobCache = tinymce.activeEditor.editorUpload.blobCache;
        var blobInfo = blobCache.create(id, file);
        blobCache.add(blobInfo);

        // Call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };

      input.click();
    }
});

将 text_images 添加到您的 route.rb 文件：

  match "text_images" => "text_images#create", via: :post

并像这样创建您的处理操作：

  def create
    if params[:file].class == ActionDispatch::Http::UploadedFile
        @image = Picture.new(image: params[:file])
        respond_to do |format|
          if @image.save
            format.json { render json: { "location": @image.image.url }.to_json, status: :ok }
          else
            format.json { render json: @image.errors, status: :unprocessable_entity }
          end
        end
      end
    end

这是一个非常粗糙的实现，您应该使它对您的应用程序上下文更加安全，验证和过滤大文件或无效文件！

更新：onchange 函数的新版本 TinyMCE 的语法最近进行了升级，以在 blobCache 对象的创建方法中包含结果 reader 属性:

      input.onchange = function() {
      var file = this.files[0];

      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry. In the next release this part hopefully won't be
        // necessary, as we are looking to handle it internally.
        var id = 'blobid' + (new Date()).getTime();
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var blobInfo = blobCache.create(id, file, reader.result);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
        cb(blobInfo.blobUri(), { title: file.name });
      };
    };

在受保护的页面上使用 TinyMCE 和 RoR 上传图片

Upload pictures with TinyMCE and RoR on protected page

ruby-on-rails

carrierwave

tinymce-4