我被困在froala編輯器中進行圖片上傳的操作。我有carrierwave工作上傳圖片到谷歌雲存儲我的應用程序的其他部分,現在我想在froala編輯器中也有圖片上傳。Rails 4 - 如何使用carrierwave在froala編輯器中上傳圖像?
以下是我迄今所做
後的圖像uplaoder
class PostImageUploader < CarrierWave::Uploader::Base
# Choose what kind of storage to use for this uploader:
storage :fog
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"post-image"
end
# Add a white list of extensions which are allowed to be uploaded.
# For images you might use something like this:
def extension_white_list
%w(jpg jpeg gif png)
end
# Override the filename of the uploaded files:
# Avoid using model.id or version_name here, see uploader/store.rb for details.
def filename
"#{model.id}-#{original_filename}" if original_filename.present?
end
end
我做
class PostImage < ActiveRecord::Base
belongs_to :post
mount_uploader :image, PostImageUploader
validate :image_size
# Validates the size of an uploaded picture.
def image_size
if image.size > 5.megabytes
errors.add(:picture, "should be less than 5MB")
end
end
end
我做在我的崗位控制器attach
和detach
方法後圖像模型但我不知道應該放入什麼內容。
def attach
end
def detach
end
def image_params
params.require(:post_image).permit(:image)
end
制定路線的附加和分離方法,但他們可能是錯誤的,因爲我不知道如果我甚至需要的方法。
match '/guides/:guide_id/posts/attach' => 'posts#attach', :via => :create, as: :attach_guide_post_image
match '/guides/:guide_id/posts/detach'=> 'posts#detach', :via => :delete, as: :detach_guide_post_image
我carriwewave初始化設置是和工作(因爲我使用它的網站上的其他地方),所以我不認爲我需要將其添加到,而且我不認爲我需要補充我的帖子控制器new
和create
方法,他們漂亮的股票標準。
從這裏我去了froala docs for image uploads,但我不知道輸入什麼值,哪些是我需要的,哪些是我不需要的。我的問題是用大寫字母寫的評論。
<script>
$(function() {
$('.editor')
.froalaeditor({
// Set the image upload parameter.
imageUploadParam: 'image',
// 1. I'M GUESSING THIS IS THE PARAM PASSED
// Set the image upload URL.
imageUploadURL: <%= attach_guide_post_image_path =%>,
// 2. MADE THIS PATH IN THE ROUTES
// Set request type.
imageUploadMethod: 'POST',
// Set max image size to 5MB.
imageMaxSize: 5 * 1024 * 1024,
// Allow to upload PNG and JPG.
imageAllowedTypes: ['jpeg', 'jpg', 'png', 'gif']
})
.on('froalaEditor.image.beforeUpload', function (e, editor, images) {
// Return false if you want to stop the image upload.
//3. SO I PUT ERROR MESSAGE IN THESE?? IF SO SHOULD IT BE A POPUP OR TEXT ON THE SCREEN AND HOW
})
.on('froalaEditor.image.uploaded', function (e, editor, response) {
// Image was uploaded to the server.
})
.on('froalaEditor.image.inserted', function (e, editor, $img, response) {
// Image was inserted in the editor.
})
.on('froalaEditor.image.replaced', function (e, editor, $img, response) {
// Image was replaced in the editor.
})
.on('froalaEditor.image.error', function (e, editor, error, response) {
// Bad link.
else if (error.code == 1) { ... }
// No link in upload response.
else if (error.code == 2) { ... }
// Error during image upload.
else if (error.code == 3) { ... }
// Parsing response failed.
else if (error.code == 4) { ... }
// Image too text-large.
else if (error.code == 5) { ... }
// Invalid image type.
else if (error.code == 6) { ... }
// Image can be uploaded only to same domain in IE 8 and IE 9.
else if (error.code == 7) { ... }
// Response contains the original server response to the request if available.
});
});
</script>
這就是我得到的。我知道基本的JS,並且已經使用了大約6個月的rails,所以對它來說相當新穎。我從來沒有在rails和js中做過這樣的事情,也找不到一個可靠的指南。
上面是我得到和我卡住了。會喜歡一些幫助,從那裏需要做什麼,以獲得圖像上傳工作。
還沒有問題。我只是不知道該怎麼做。 – Rob