将上传的图片插入summernote编辑器
Posted
技术标签:
【中文标题】将上传的图片插入summernote编辑器【英文标题】：Insert uploaded image to summernote editor 【发布时间】：2019-08-25 01:00:14 【问题描述】：我的目标是将上传的图片（本地文件）插入到summernote编辑器中。
图片上传成功，只需插入编辑器即可。
我试图控制台记录编辑器实例，但它显示未定义。如果我可以将编辑器实例传递给sendFile 函数，我认为问题将得到解决。
jsfiddle
$(document).ready(function ()
$('.summernote').summernote(
callbacks:
onImageUpload: function(files, editor, welEditable)
var url= sendFile(files[0], editor, welEditable);
,
height: 300,
focus: true,
);
function sendFile(file, editor, welEditable)
data = new FormData();
data.append("file", file);
console.log(editor);
/* $.ajax(
data: data,
type: "POST",
url: "Test/test",
cache: false,
contentType: false,
processData: false,
success: function(url)
editor.insertImage(welEditable, url);
console.log(url); //eg:https://server-url/assets/images/a8f15ed.jpg
,
error: function(jqXHR, stat, err)
console.log(stat+':'+err);
); */
);<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="col-md-4">
<div class="summernote"></div>
</div>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：你可以尝试设置'text/html' mode
注意：onImageUpload回调中没有editor、welEditable参数
$(document).ready(function()
$('.summernote').summernote(
height: 300,
focus: true,
codemirror:
mode: 'text/html',
);
);<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="col-md-4">
<div class="summernote"></div>
</div>
</div>
</div>
</div>更新 在 ajax 成功时，您可以通过
插入图像// getting old html
let html = $('.summernote').summernote('code');
// setting updated html with image url
$('.summernote').summernote('code', html + '<img src="' + url + '"/>');
【讨论】：
我是从here关注的 @unreleased 发布在2013。但您使用的是最新版本
其实我需要通过ajax请求上传图片到特定文件夹，并将图片URL附加到编辑器。将图像转换为 base64 并附加到编辑器并不能解决问题。如果您可以通过 ajax 请求保存图像，这对我会有帮助。@Aswin Kumar
感谢@Aswin Kumar 的支持。为您的时间 +1。我以不同的方式解决了这个问题:)【参考方案2】：
在ajax成功后，我们可以通过这种方式将图片插入到编辑器实例中
success: function(url)
$('#summernote').summernote("insertImage", url, 'filename');
,
不需要从sendFile(file, editor, welEditable) 函数参数插入editor。就我而言，这解决了问题。
乐于助人comment
【讨论】：
以上是关于将上传的图片插入summernote编辑器的主要内容，如果未能解决你的问题，请参考以下文章