Ruby on rails 在受保护页面上载带有TinyMCE和RoR的图片
我不需要一个具体的解决方案,但有人给我一个更接近的提示来解决我的问题。我有一个RubyonRails4内部网应用程序,它受登录保护。在这个应用程序中,我有一个编辑页面,其中我还使用了TinyMCE。它能够为它提供一个URL,将图片发送到该URL进行上传(请参阅)。 我用实现了上传例程,它在TinyMCE之外运行得非常好。如果可能的话,我也会保留这个插件。 但正如我所说,CarrierWave目前不使用TinyMCE和异步上传 那么你知道我如何上传一个图像,但是使用正确的会话令牌(异步)吗。以及图片URL,该URL不保存数据库,而是在TinyMCE中显示的文本中。是否有一个插件可以帮助我或其他什么? 如果你需要更详细的信息,请告诉我 致意 Marco您必须使用for TinyMCE并设置Ruby on rails 在受保护页面上载带有TinyMCE和RoR的图片,ruby-on-rails,carrierwave,tinymce-4,Ruby On Rails,Carrierwave,Tinymce 4,我不需要一个具体的解决方案,但有人给我一个更接近的提示来解决我的问题。我有一个RubyonRails4内部网应用程序,它受登录保护。在这个应用程序中,我有一个编辑页面,其中我还使用了TinyMCE。它能够为它提供一个URL,将图片发送到该URL进行上传(请参阅)。 我用实现了上传例程,它在TinyMCE之外运行得非常好。如果可能的话,我也会保留这个插件。 但正如我所说,CarrierWave目前不使用TinyMCE和异步上传 那么你知道我如何上传一个图像,但是使用正确的会话令牌(异步)吗。以及图
文件选择器
属性和回调,这样您就可以从客户端而不是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\u图像
添加到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
这是一个非常粗糙的实现,您应该使它对您的应用程序上下文更安全,验证和过滤大型或无效文件
更新:TinyMCE新版本的语法最近进行了升级,用于onchange
函数,在blobCache
对象的创建方法中包含一个结果读取器属性:
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 });
};
};
谢谢你迄今为止的详细回答。我会尝试一下,并将你的答案标记为正确,当它工作时:)好的,你的答案让我更进一步,但没有解决问题,上传图片时,我收到了CSRF警告。我必须编写自定义图像上传处理程序函数。通过这种方式,我可以添加RoR生成的csrf_令牌。现在应用程序不再抛出警告并终止会话。我会在周末写我的最终解决方案。你应该让你的生活更轻松,永远不要再遇到那些问题。非常感谢你的想法!现在我有了一个轻薄而简单的解决方案。这是可行的,但是如果您正在使用回形针进行图片
,那么您将需要忽略文件类型验证以及跳过\u之前的操作:验证api端点上的真实性\u令牌
,以便上载。