- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我不知道如何在 froala 编辑器中上传图片。我有 carrierwave 用于将图像上传到谷歌云存储以用于我的应用程序的其他部分,现在我希望在 froala 编辑器中上传图像也能正常工作。
这是我到目前为止所做的
上传图片
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
我在我的 post Controller 中制作了 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 初始化器已经设置好并且可以工作(因为我在网站的其他地方使用它)所以我认为我不需要添加它。而且我认为我不需要添加我的后 Controller 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,并且已经使用 Rails 大约 6 个月了,所以我对它还很陌生。我从来没有在 rails 和 js 中做过这样的事情,也找不到可靠的指南。
以上是我得到的,但我卡住了。希望得到一些帮助,了解从那里需要做什么才能使图片上传正常工作。
最佳答案
我遇到了同样的问题,决定完全绕过 carrierwave,直接上传到 S3,如下所示:
$('.post-editor').froalaEditor({
toolbarBottom: true,
toolbarButtons: ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'insertLink', 'insertImage', 'insertVideo'],
imageUploadToS3: {
bucket: "<%= @hash[:bucket] %>",
region: 's3-us-west-1',
keyStart: "<%= @hash[:key_start] %>",
callback: function (url, key) {},
params: {
acl: "<%= @hash[:acl] %>", // ACL according to Amazon Documentation.
AWSAccessKeyId: "<%= @hash[:access_key] %>", // Access Key from Amazon.
policy: "<%= @hash[:policy] %>", // Policy string computed in the backend.
signature: "<%= @hash[:signature] %>", // Signature computed in the backend.
}
}
})
在 config/initializers/AWS_CONFIG.rb 中设置初始化程序:
AWS_CONFIG = {
'access_key_id' => ENV["S3_ACCESS_KEY"],
'secret_access_key' => ENV["S3_SECRET_KEY"],
'bucket' => 'froala-bucket',
'acl' => 'public-read',
'key_start' => 'uploads/'
}
在 lib/amazon_signature.rb 中设置亚马逊签名:
module AmazonSignature
extend self
def signature
Base64.encode64(
OpenSSL::HMAC.digest(
OpenSSL::Digest.new('sha1'),
AWS_CONFIG['secret_access_key'], self.policy
)
).gsub("\n", "")
end
def policy
Base64.encode64(self.policy_data.to_json).gsub("\n", "")
end
def policy_data
{
expiration: 10.hours.from_now.utc.iso8601,
conditions: [
["starts-with", "$key", AWS_CONFIG['key_start']],
["starts-with", "$x-requested-with", "xhr"],
["content-length-range", 0, 20.megabytes],
["starts-with", "$content-type", ""],
{bucket: AWS_CONFIG['bucket']},
{acl: AWS_CONFIG['acl']},
{success_action_status: "201"}
]
}
end
def data_hash
{:signature => self.signature, :policy => self.policy, :bucket => AWS_CONFIG['bucket'], :acl => AWS_CONFIG['acl'], :key_start => AWS_CONFIG['key_start'], :access_key => AWS_CONFIG['access_key_id']}
end
end
最后在你的 PostsController 中调用它:
before_action :set_hash_for_froala
...
def set_hash_for_froala
@hash = AmazonSignature::data_hash
end
此视频非常有帮助:http://rubythursday.com/episodes/ruby-snack-23-froala-wysiwyg-saving-images-on-amazon-s3
关于ruby-on-rails - Rails 4 - 如何使用载波在 froala 编辑器中上传图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37518201/
我想编辑一个源代码(Java脚本、JSON等)。在角-弗罗拉-所见即所得中。因此,按照逐步的文档https://froala.com/wysiwyg-editor/examples/code-mirr
我正在使用 FROALA 构建电子邮件模板。 我不想让用户有权编辑它的一部分。 有没有办法阻止用户编辑部分内容? 谢谢你。 最佳答案 最好的方法是使用 contenteditable=false标志,
我从 Angular 为1的项目Froala编辑器开始,我逐步按照文档进行操作,我想显示insertImage按钮和insertTable,但没有显示任何内容。这是我的代码: var tb = [ "
我正在使用 Froala edit 作为富文本编辑器, $(notesSelector).on('froalaEditor.initialized', function (e, editor) {
我正在使用 Froala edit 作为富文本编辑器, $(notesSelector).on('froalaEditor.initialized', function (e, editor) {
Froala 编辑器组件在初始化时有许多可用的设置,包括占位符。 但是,我有一个情况,我必须在初始化后更改占位符。 我在 API docs 中看不到任何方法来做到这一点。我尝试通过 console.l
当复制和粘贴文本和其他一些情况时它会崩溃。之后无法提交表单。 这是我的带有图像 uploader 的 javascript 参数: require('froala-editor/js/froala_e
我正在使用 Froala 编辑器。我想将图像上传到自己的服务器,如 documentation 中所述响应格式应为 { link: 'path/to/image.jpg' },但我的服务器返回另一种格
我一直在四处寻找,但没有找到解释如何在 froala 编辑器的工具栏上创建自定义输入字段的地方。类似于 url 按钮的工作方式: Froala url input 它有一个输入框和一个插入框,我怎样才
我使用froala编辑器,以及图像上传插件的配置。问题是,当我上传高度大于宽度的图像时,编辑器会自动旋转图像。 您可以在这个演示页面froala editor demo测试这个问题. 如何解决这个问题
我是一名用户体验设计师,在前端开发方面有一些经验,在在线编辑器概念验证中工作,以便在可用性研究中进行测试。我们的第一个发现是,用户希望有一个按钮可以直接添加公司字体系列和正文文本大小(Arial 11
我第一次使用 froala 编辑器,现在遇到了问题。在第一页上,froala 工作得很好,但在第二页上,编辑器不起作用。当我单击工具栏按钮时,我注意到了。文本长度始终等于零并且占位符不会隐藏。请帮我解
我在我的网站上成功安装了 Froala,但是定位图像似乎不起作用。它们总是在左边,即使我将它们居中/右对齐。 所以在文本编辑模式下它工作正常.. 但看了结果后,所有 3 个对齐看起来都一样。 图像有这
完整的 Froala 所见即所得编辑器如下所示: 但是在我的元素中添加 API 后,一些工具栏按钮丢失了。快照如下所示。 从上面可以看出,我的编辑器中缺少大部分工具栏按钮,例如颜色、段落格式等。 我包
Froala 不想显示某些按钮(例如:视频、图像、表格...),我现在不知道为什么。也许我只是忘记添加一些脚本?这是我的选项: public tb = [ "bold", "i
我正在尝试使用 Froala 所见即所得编辑器将图像上传到我的本地主机(用于测试目的),但它不起作用。当我选择要上传的图像时,它在编辑器中显得褪色,然后在我单击其他地方时消失。下面是我的代码以及指向我
我正在使用 froala js 1.9 js .. 直到昨天为止都运行良好 .. 但现在 Enter 键在编辑器上不起作用。 $('#txt_blog_editor').editable({
由于需要,我已经实现了 froala 编辑器并动态创建了 froala id。这工作正常,但我想禁用此编辑器中的表情符号。 $('#froala'+key).froalaEditor({ im
我正在为 Froala 定制一个自定义工具栏按钮。为了执行我的操作,我需要从原始文本区域读取数据属性。 我怎样才能实现这个目标? 谢谢。 最佳答案 FroalaEditor.RegisterComma
我正在尝试将一些事件监听器注册到使用 froala 编辑器 react 组件呈现的元素。我按照文档中的建议在 froala 配置中传递我的“潜在”事件监听器。 这就是我想要实现的目标 events :
我是一名优秀的程序员,十分优秀!