我不需要具体的解决方案,但需要有人给我更接近的提示来解决我的问题。我有一个 Ruby on Rails 4 Intranet 应用程序,它是受登录保护的。在此应用程序中,我有一个编辑页面,我也使用 TinyMCE。它能够为其提供一个 URL,将图片发送到该位置以进行上传(请参阅 here )。 我用 CarrierWave 实现了上传例程它在 TinyMCE 之外也能很好地工作。如果可能的话我也会保留该插件。 但正如我所说,CarrierWave 目前无法与 TinyMCE 和异步上传配合使用。
那么您知道如何使用正确的 session token (异步)上传图像吗?并且图片URL不保存在数据库中,而是在TinyMCE中显示的文本中。有没有可以帮助我或其他什么的插件? 如果您需要更详细的信息,请告诉我。
最诚挚的问候 马可
最佳答案
您必须使用image plugin对于 TinyMCE 并设置 file_picker
属性和回调,以便您可以从客户端而不是 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
这是一个非常粗糙的实现,您应该使其对您的应用程序上下文更加安全,验证和过滤大型或无效文件!
更新:最近对新版本 TinyMCE 的 onchange
函数的语法进行了升级,以在 blobCache
对象的 create 方法上包含结果读取器属性:
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 });
};
};
关于ruby-on-rails - 在 protected 页面上使用 TinyMCE 和 RoR 上传图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42075911/