Froala编辑器v2.3.4插入图像->只是作为"data: image“插入到DOM中，不能上传到服务器
Froala编辑器是一款功能强大的富文本编辑器，可以用于在网页中创建和编辑内容。在版本2.3.4中，插入图像时，可以选择将图像作为"data: image"插入到DOM中，而不是上传到服务器。
这种方式被称为Base64编码，它将图像数据直接嵌入到HTML文档中，而不需要通过服务器上传和存储图像文件。这种方法的优势是可以减少服务器的负载和存储空间的占用，同时加快图像的加载速度。
然而，这种方法也有一些限制。由于图像数据被嵌入到HTML文档中，会增加文档的大小，导致页面加载时间变长。此外，由于图像数据直接暴露在HTML中，可能会增加页面的安全风险。
对于需要上传到服务器的图像，可以考虑使用其他方法，如通过表单提交或使用AJAX将图像上传到服务器。这样可以更好地管理和处理图像文件，并且可以在服务器端进行进一步的处理和存储。
腾讯云提供了丰富的云计算产品和服务，可以满足各种需求。在图像处理方面，腾讯云的云图片处理（Cloud Image Processing，CIP）服务可以帮助您实现图像的上传、处理和存储。您可以通过CIP的API接口来实现图像的上传和处理操作。具体的产品介绍和文档可以参考腾讯云的官方网站：腾讯云云图片处理。
需要注意的是，以上提到的腾讯云产品仅作为示例，您可以根据具体需求选择适合的产品和服务。
相关·内容
我使用的是Froala编辑器v2.3.4，我使用的是2.3.4/js//image.min.js文件的insertImage插件，该插件无需额外的参数即可激活。
每次我安装一个图像时，它都会被上传到
我希望使用src="data:image"将图像输入到DOM树中
我通过设置imageUploadURL参数并使用无效的URL来获得此行为：
结果是HTML代码如下所示：
图像不会上传，而只是作为base64编码的字符串添加到DOM中。这正是我想要的。但是，当然，我得到了一个错误：
在Froala编辑器v2中是否有一个选项可以禁用图像上传到服务器(不能将图像插入
浏览 12提问于2016-09-12得票数 2
我希望用户使用upload image按钮将图像上传到服务器中，然后在需要时使用image Manager访问该图像。目前，我使用的是
events: {
//This prevent the default image insert in the editor
'froalaEditor.image.uploaded': function (e, editor, response) {
$('#froala-editor').froalaEditor('commands.undo
浏览 0提问于2018-03-17得票数 1
froala文档指出，froalaEditor.image.uploaded事件是在成功的图像上传请求之后，但在编辑器中插入图像之前触发的。https://www.froala.com/wysiwyg-editor/docs/events#image.uploaded 但是，正如您从我的jsfiddle中看到的，该事件没有被触发。 https://jsfiddle.net/kzr67tdw/1/ html <div id="froala-editor">
<p>Click on the image below to see the custom
浏览 46提问于2019-01-30得票数 0
复制问题的步骤：
在上打开froala编辑器。
删除编辑器中的所有内容。
插入图像。
向图像添加一个标题。
单击图像外部并尝试键入。
发布：在添加图像标题后，如果写入任何文本，则总是在图像内写入颜色。
视频：
In Froala:
有谁可以帮我？
浏览 0提问于2018-08-27得票数 8
回答已采纳
我有一个rails 6应用程序，使用ActiveStorage (附在文章上的图像)和froala编辑器。都上传到S3。
但我目前使用的是froala S3上传和活动存储。在表格中，我有：
是一个上传按钮，它允许上传一个pdf文件，是一个文本字段，在这里可以上传。
主动存储
class Article < ApplicationRecord
belongs_to :author
has_one_attached :image
#ArticleController
@article.image.attach(params[:image])
Froala:
# class Adm::
浏览 0提问于2020-06-28得票数 1
2回答
我正在使用Froala编辑器，在尝试插入多个图像时遇到了一个问题。问题是只插入了第一个图像，而没有插入其余的图像。我已经在网上搜索过答案，但什么也找不到。是否可以一次插入多个图像？
下面是我的代码：
function show() {
$current_image = editor.image.get();
var image = {
id: 0
}
angular
.element($('html'))
.scope()
.showImageManager(image)
浏览 2提问于2017-03-14得票数 3
我从froala编辑器(角io)将图片上传到S3，现在我想将该链接存储在变量中。我怎么能这么做？以下是我如何尝试
export class WriterComponent implements OnInit {
imageLink:string;
constructor() { }
ngOnInit() {
this._usersService.getS3Hash().subscribe(resp=>{
this.options['imageUploadToS3'] = resp;
});
}
publi
浏览 0提问于2018-05-03得票数 0
我正在使用Froala编辑器。我想上传图像到自己的服务器，如中所描述的响应格式应为{ link: 'path/to/image.jpg' }，但我的服务器返回另一种格式的响应。
有没有可能通过处理一些事件来使用Froala的自定义响应格式？
浏览 0提问于2016-02-10得票数 2
我有一个文章模型，我想添加图像，使用活动存储安装通过表单上传图像。无论是在本地还是在生产环境中，主动存储都运行良好，可以上传到亚马逊s3。 但是，我也在使用froala。当试图插入一个图像到一个编辑器时，我得到这个错误(在浏览器中)：XHR OPTIONS https://undefined.amazonaws.com/undefined article_controller.rb def nouveau # new
@auteur = Auteur.find(session[:auteur])
@article = Art
浏览 27提问于2019-06-10得票数 0
现在，它正在将图像上传到他们的服务器，当然是temporary.But，我不想上传它。我只是想以blob或base64编码字符串的形式插入，当用户实际按下保存按钮时，它会被上传到我的s3 bucket.Is中，就像用froala那样吗？
浏览 2提问于2017-06-19得票数 1
回答已采纳
我使用Codeigniter3和Froala编辑器在我的网站上发布一些内容，并且在点击Froala编辑器中的插入图像和在Ajax作为图像链接响应之后创建一个图像上传，但是在Froala编辑器中没有显示
发布图片没有在Froala编辑器中显示，但它已经上传到服务器(本地主机)。
这是我的佛罗拉编辑
<script>
$(function () {
$('#edit').editable({
inlineMode: false,
mediaManager: false,
sh
浏览 3提问于2015-07-22得票数 0
回答已采纳
我正试图在froala编辑器中插入一个链接。但是，当我点击链接(如屏幕截图所示的froala)时，我就没有打开/编辑/插入/unlink这样的子菜单选项。我的froala编辑器在div中打开，因为一个模态对话框(引导类) .I在我的文件中包含了link.min.js插件。
我怀疑我们能否在父弹出窗口( div弹出窗口)中打开弹出窗口(从froala打开子菜单选项)？
<div class="modal" id="modalDivAddEvent" tabindex="-1" role="dialog" aria-labell
浏览 2提问于2019-06-03得票数 0
回答已采纳
3回答
我正在尝试使用像Froala这样的所见即所得编辑器将图像上传到我的服务器。问题是我需要将多个图像存储到模型的一个属性中。这是因为当我的用户上传图像时，我不会提前知道有多少图像将被存储。
如果有人能给我指点的话那就太好了。或者是例子。
浏览 0提问于2014-12-17得票数 0
我使用Froala编辑器内的一个弹出式6角应用程序。应该禁用特性insertImage (不可见)。弗洛拉迪夫看起来是这样的：
<div id="froala-editor" [froalaEditor]="froalaOptions" (froalaInit)="initFroala($event)">Hello, Froala!</div>
在我设置的js (类型记录)上(没有insertImage)：
public initFroala(froala) {
$('#froala-editor&
浏览 0提问于2018-07-17得票数 1
我使用的是froala编辑器，它还将图像上传到s3，我遵循了docs 中提到的步骤
s3桶上的CORS配置
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<Allow
浏览 0提问于2019-05-13得票数 0
回答已采纳
我想在我的web应用程序中使用Froala。我正在测试它的图像插入按钮，并希望将图像大小限制为1M。当我拖放一个大于该大小的图像时，我看到一条错误消息：
Something went wrong. Please try again.
我想展示一些东西，比如
Image cannot be larger than 1M.
Image type is not supported.
这在Froala是可行的吗？
浏览 1提问于2017-07-30得票数 0
回答已采纳
1回答
我使用Froala制作HTML文件，并将其存储在服务器上。我使用的是Angular 1的Froala模块。
当我添加一个页面时，我有一个清除Froala编辑器的按钮，但当我点击它时，所有的图像都被删除了，因为Froala运行事件froalaEditor.image.removed。
所以我想知道当我点击清理按钮来清理Froala编辑器的文本区时，是否有人知道如何阻止这个事件？
浏览 1提问于2017-04-19得票数 0
例如，如果我将6个图像上传到Wordpress文章中的一个图库，那么是否有一个代码可以插入到每个图像的single.php页面中，这样我就可以精确地控制每个图像的去向了吗？
例如，如果我想在标题之前插入一个图像，我可以在标题之前插入'image1‘的代码，然后在标题之后插入另一个图像，为'image2’插入一个不同的代码等等。
浏览 1提问于2014-10-08得票数 1
回答已采纳
1回答
弗罗拉编辑器工作不完美
、、、
我使用froala编辑器插入CMS内容到database.But，它不能很好地工作，我把内容放在左边，图像在右边，它在编辑器中正确地对齐，但是在我的视图页面(从数据库获取内容)它没有正确地对齐。
In editor
In View page
谁来帮帮我
浏览 3提问于2014-10-18得票数 0
回答已采纳
1回答
我在我的项目中使用了tinymce编辑器。对于图像上传，我将图像转换为base64，并在编辑器中显示相同的图像。也就是说，我不会将任何数据上传到服务器。代码如下。
<Editor
initialValue={selectedDocument.html_content}
init={{
plugins: 'link image code, lists',
浏览 2提问于2018-10-16得票数 0
回答已采纳
1回答
段落标记在模糊事件后关闭。
、、、、
我在桌面应用程序内部的Web视图中使用Froala编辑器。我有一个自定义标签列表，当用户按编辑器外的按钮时，我需要附加到Froala的文本中。为了这个，我打电话来
$('#froala_editor').froalaEditor('html.insert', 'my text', false);
问题是:当编辑器丢失focus(blur) (之后或之前)时，它将关闭<p>标记，因此，无论我在后面插入什么，都会转到新行。是否有办法防止Froala在<p>事件上复制blur()标记？
我不想使用自定义工具栏按钮。提前谢谢。
应
浏览 1提问于2018-09-28得票数 1
我在一个使用codeigniter的网站上工作，我正在尝试使用Froala编辑器上传文本区域中的图像。在我尝试将图像文件上传到本地文件夹而不是默认的之前，一切都很正常
这是我的html文件：
<textarea id="my_editor" name="my_editor" class="editor">
</textarea>
<script>
$(function() {
$('.editor').froalaEditor({
imageUploadURL: "
浏览 0提问于2016-05-18得票数 1
2回答
我正在使用作为我的网站。这个编辑器有内置的图像上传功能-图像上传工作良好，但我的反应有困难。
这是从文件中得出的：
The server processes the HTTP request.
The server has to process the upload request, save the image and return a hashmap containing a link to the uploaded image. The returned hashmap needs to look like: { link: 'path_to_uploaded_file/file
浏览 3提问于2014-02-14得票数 1
回答已采纳
1回答
目前，我正在使用具有角的froala编辑器，并使用AWS S3服务上传文件。
我想在文件上传到S3之前重命名它。所以我使用已经出现在froala中的事件，即'file.beforeUpload‘
我得到的对象是'FileList‘。这样我就不能更改文件名了。
在那个事件中，我无法重命名文件。有人帮忙吗？
浏览 3提问于2020-04-04得票数 2
回答已采纳
1回答
在s3上上传图片
、、
我在我的应用程序中使用react-froala-wysiwyg编辑器。但是我在s3桶上上传图片时遇到了麻烦。当我试图在s3上上传图片时，s3返回错误禁止: 403。
任何人都可以共享将图像上传到s3上的配置吗？
以下是我的配置.
var config = {
imageUploadToS3: {
bucket: 'testing-s3upload',
// Your bucket region.
region: 'us-east-1',
keyStart: 'froalaUploads/',
pa
浏览 3提问于2017-11-07得票数 0
回答已采纳
1回答
如何使图像单击Froala编辑器
、、、、
我希望在.click Froala编辑器上获得图像的，以创建自定义函数，为此，我希望获得在Froala编辑器中选择的图像。
我试过几种方法。
1.froalaEditor.click函数：
$('#froala_editor').on('froalaEditor.click', function(e, editor, clickEvent) {
console.log(clickEvent.toElement);
});
2.Custome jQuery函数
$.extend({
IFRAME: function (s) {
浏览 0提问于2018-03-05得票数 2
回答已采纳
我正在使用froala 2.4.0内联编辑器来实现类似facebook post的功能。我已经在一个div中创建了一个编辑器，如图像below.Now所示，我想让父div可伸缩，即增长/收缩为changes.The编辑器的内容，边框是父div，占位符是editor.Is，有没有办法做到这一点？
这就是我到目前为止得到的：
$(function() {
$('#custom-post-feed-text').froalaEditor({
toolbarInline: true,
charCounterCount: false,
placeho
浏览 12提问于2017-01-23得票数 0
回答已采纳
目前，我很难理解，当单击工具栏按钮时，哪一种方式最好不要将焦点放在Froala编辑器上？
我试图通过事件访问编辑器，但我无法让它工作，我不确定这是正确的选择。
new FroalaEditor(".froala_editor", {
events: {
'toolbar.focusEditor': function () {
alert("hello")
console.log(this);
}
}
});
我们有editor
浏览 0提问于2019-12-29得票数 1
我可以上传一个图像与Froala，但我没有找到方法，以获得"pk“参数，我发送的响应。imageInsert回调看起来没有用。如何使用ImageUpload的真正回调？以下是django中的代码：
class ArticleImageUploadView(CreateView):
form_class = ArticleUploadImageForm
@method_decorator(login_required)
def dispatch(self, *args, **kwargs):
return super(ArticleImageUp
浏览 0提问于2014-12-11得票数 0
回答已采纳
我使用Froala v2.6.1，我希望在用户单击div时，在最后一个插入符号位置将字符串插入编辑器，但是字符串总是插入在编辑器的末尾。
以下是我所做的事：
<div class="variable" data-value="{{user_id}}">USER ID</div>
Jquery：
$('div.variable').click(function() {
$("#template_editor").froalaEditor('html.insert', $(this).d
浏览 6提问于2017-06-01得票数 5
回答已采纳
使用FCKEditor控件上传的图像必须插入到数据库中。任何人请帮助如何使用FCK编辑器控件(“图像”按钮)上传图像。用户还应该能够直接从他们的本地计算机上传图像，而不是将其上传到服务器。选择的图像应直接插入数据库。我有一个将图像插入数据库的写函数，但不知道如何从FCKEditor控件中获取所选的图像！
浏览 2提问于2011-04-27得票数 2
回答已采纳
1回答
我使用FROALA将图像拖放到我的网页上，然后将它们保存在服务器上。如果从相同的域执行此操作，此操作很好。但是，如果我使用不同的端口(以模拟不同的服务器)，则必须实现CORS，而CORS则会给出错误。
未能加载本地主机:8082/image:只支持协议方案的跨源请求: http、data、chrome、chrome扩展名、https。
正在传递的图像url是：
blob:
因此CORS不接受blob:在url中并阻止它。有什么办法绕过这件事吗？注意:我可以向服务器发出其他请求，CORS可以正常工作，触发错误的只是这个blob链接。
服务器: Express + NodeJS客户
浏览 0提问于2018-03-17得票数 0
回答已采纳
我想在flutter web中使用富文本编辑器，但在flutter web中找不到类似的编辑器。所以我想如果我能在flutter web中实现froala编辑器。那么有没有可能将froala-editor的javascript库插入到flutter web中呢？ https://froala.com/wysiwyg-editor/ 是否可以在flutter web中使用froala-editor，或者是否有其他方法可以在flutter web中获得富文本编辑器？ 提前谢谢。
浏览 74提问于2020-05-20得票数 3
回答已采纳
我正在使用上传图像插件来实现“拖放插入图像”功能。当我将图片放到编辑区域时，图片被上传到服务器，然后使用返回的url显示预览。
但是我需要在不上传到服务器的情况下在编辑区域显示图像预览。当我点击自定义提交按钮，我想保存整个内容，包括图像到服务器。
如果有人对此有什么想法，请告诉我。
提前谢谢。
湿婆
浏览 1提问于2016-04-18得票数 1
我在弗洛拉项目中使用过。textarea元素位于要发送到服务器的表单中。我将任何文本添加到Froala并单击submit表单按钮。但是服务器上的textarea字段为空(NULL)。我认为在向服务器提交表单之前，我需要调用Froala方法来准备textarea，但我不知道是哪个。
有什么问题吗？
视图
@using (Html.BeginForm("UpdatePost", "Post", FormMethod.Post, new { id = "postForm" }))
{
<textarea id="PreviewTe
浏览 2提问于2017-09-13得票数 0
在引导模式中使用Froala。
我已经包括插件，并可以插入一个图像(并成功上传)，但下拉按钮在编辑图像按钮不显示。因此，当单击图像时，图像按钮显示为正常，但单击下拉按钮(如对齐图像)，则不会显示选项。
我已经将froala实例中的z索引设置为2501 (这使得按钮显示，而不是下拉列表)。
有什么想法吗？
浏览 9提问于2022-09-03得票数 0
当我在Froala中使用html.insert函数时，它会剥离内联样式。
编辑器外观类似于
$('.fr-view').froalaEditor({
// Set custom buttons with separator between them.
toolbarButtons: ['paragraphFormat', 'bold', 'italic', 'strikeThrough', 'formatOL', 'formatUL',
浏览 0提问于2018-09-12得票数 2
回答已采纳
我在我的angular2项目中使用了froala。我已成功上传图像，但无法触发image.uploaded事件。在froala文档中，事件是这样的
$('.selector').on('froalaEditor.image.uploaded', function (e, editor, response) {
// Do something here.
});
但我无法在ts代码中实现这一点。
浏览 3提问于2017-06-11得票数 0
回答已采纳
1回答
FCKeditor。使用图像
、、、、
我在FCKeditor中上传图片有两个问题。
上传文件的文件夹是"user“，它位于网站的根目录中。在FCKeditor中上传图片有两种方式: 1.插入/编辑图片-浏览服务器-上传此文件夹中的新文件-上传。图像被上传到文件夹" Image "，该文件夹位于"user“文件夹中。2.插入/编辑镜像-选项卡“上传”-上传-发送到服务器。图像被上传到文件夹"user“，使用Browse Server我看不到它，因为Browse Server显示文件夹" Image”(以及"user“的其他子文件夹)，而不是”user“。我怎样才能改变它？我想有
浏览 2提问于2010-06-30得票数 0
回答已采纳
2回答
我需要能够将div更改为图像，然后使用php将图像上传到服务器。目前，我可以下载div作为图像，然后我可以上传该图像的html形式，但我想剪掉这项工作。我只想点击一个按钮，没有下载，但是从div到png的转换发生了，然后上传发生了。我没有正确链接到我的php文件。
我一直在使用这个链接将div转换为png。运行良好，但我需要能够与我的php代码结合起来。用于转换和下载的JS文件在那里。我不想下载，只想上传到服务器。
<div class="offer_display" id="offer_display">
<div class=&
浏览 1提问于2014-08-26得票数 2
我使用余烬js作为我的前端MVC。我有一个问答模块，它类似于堆栈溢出，其中有两个字段，一个用于标题，另一个用于描述。
因为描述是一个文本区域，所以我用r插入了它。
现在，我通过使用
var editorText = $('.froala-element');
var desciption = editorText.html();
在余烬控制器中。
例如，如果我控制台记录了来自文本区域的内容
<p><img class="fr-fin" data-fr-image-preview="false" alt="Image ti
浏览 6提问于2014-10-17得票数 0
2回答
Froala不想显示一些按钮(比如:视频、图像、表格……)我现在不知道为什么。也许我只是忘了添加一些脚本？这是我的选项：
public tb = [
"bold", "italic" , "insertTable","insertImage"];
public options: Object = {
placeholderText: 'Edit Your Content Here!',
toolbarInline: false,
toolbarButtons: this.t
浏览 34提问于2017-01-20得票数 7
回答已采纳
5回答
我想有一个简单的，一键，图像上传功能与CKEditor。我使用的是D6和CKEditor 3.6.1。我不想要服务器文件浏览功能，只从用户自己的计算机上传图像。
我已经对这个问题做了彻底的研究，并尝试过不同的建议方法。似乎最适合我需要的解决方案是为CKEditor模块安装IMCE模块和CKEditor插件。因此，我就这样做了，并按照这里找到的安装说明：http://drupal.org/node/738092
上传的图像设法到达我服务器上的目标文件夹，但是当我打开CKEditor的“image”对话框并点击‘server’按钮时，UI上没有任何变化。
我希望CKEditor关闭“图像”对话框并
浏览 0提问于2011-09-01得票数 3
1回答
我尝试了这个函数，在上传到服务器时压缩图像。但上传图像时不会减小图像的大小。//压缩镜像函数compressImage($source，$destination，$quality) { getimagesize($source)； if ($info‘’mime‘== 'image/jpeg') $image = imagecreatefromjpeg($source)； elseif ($info‘’mime‘== 'image/gif') $image = imagecreatefromgif($source)； elseif ($info‘’mime‘=
浏览 18提问于2020-04-17得票数 0
1回答
我正在从事使用Froala 2.4.0 WYSIWYG编辑器的项目。我在用xampp和localhost测试。我不能使用本地路径上传图像和文件，所有文件和图像上载在：中，但我希望将所有文件和图像上载到
怎么做？我在弗罗拉网站上试过，但我做不到。
浏览 3提问于2017-02-21得票数 0
回答已采纳
有没有一种简单的方法来强制Froala使用内联样式而不是类来对齐图像？
换句话说，当froala对齐一个图像时，html输出变成
<img src="..." class="fr-dii fr-fil">
但我需要的是
<img src="..." style="float: left;">
浏览 4提问于2016-02-12得票数 1
1回答
我正在做一个文本扩展器功能。基本上，如果我插入类似"HW“的内容，代码将检测"Hello World”并将其插入到编辑器中。
如何在文本后设置插入符号？我只找到了一些方法来设置带有节点的选择，但这并不完全适用。在其他编辑器中，比如Redactor，有一个可以添加到字符串中的unicode字符，这样编辑器就知道插入符号应该在哪里。
如何使用Froala做到这一点？
谢谢
浏览 0提问于2017-04-20得票数 1
4回答
我成功地在我的网站上安装了Froala，但是定位图像似乎不起作用。它们总是在左边，即使我把它们中间/右边对齐。
因此，在文本编辑模式下，它工作得很好。
但是在观察了结果之后，所有的3种形式看起来都一样。
这些图像有以下几个类：
class="fr-dib fr-draggable fr-fil" // this should be left align
class="fr-dib fr-draggable" // this should be center align (doesn't work)
class="fr-di
浏览 1提问于2016-09-01得票数 2
我正在尝试使用自定义上传功能的图像在froala中，所以我有以下设置：
imagePaste: true,
imageUploadParam: 'file',
imageUploadParams: {
froala: true,
},
imageUploadURL: '/update/files',
imageUploadMethod: 'POST',
这将在粘贴图像时成功地将图像上载到我们的服务器。
我们需要重写从服务器得到的响应，以构建url，因此具有以下内容：
'froal
浏览 1提问于2018-02-06得票数 0
我已经使用下面的表单将多个图像上传到我的服务器。
<form name="addimageForm" id="addimageForm" method="post" action="" enctype="multipart/form-data">
Gallery Image:
<input name="image_name[]" type="file" id="image_name" multiple=&
浏览 2提问于2013-01-23得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
