将上传的图片插入到summernote编辑器
[英]Insert uploaded image to summernote editor
问题描述
My objective is to insert the uploaded image(local file) to the summernote editor.
我的目标是将上传的图像（本地文件）插入到 Summernote 编辑器中。
Image uploading successfully, only need to insert into the editor.图片上传成功，只需插入编辑器即可。
I was trying to console log the editor instance, but it's showing undefined.我试图控制台记录编辑器实例，但它显示未定义。 If I can pass the editor instance to the sendFile function, I think the issue will be resolved.如果我可以将编辑器实例传递给sendFile函数，我认为问题将得到解决。
$(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>
2 个解决方案
解决方案1
2 2019-04-03 14:24:55
You can try setting 'text/html' mode您可以尝试设置'text/html' mode
Note: There is no editor , welEditable params in onImageUpload callback注意： 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>
UPDATE On ajax success you can insert an image by更新在 ajax 成功时，您可以通过以下方式插入图像
// getting old html
let html = $('.summernote').summernote('code');
// setting updated html with image url
$('.summernote').summernote('code', html + '<img src="' + url + '"/>');
解决方案2
2 已采纳 2019-04-04 09:59:01
On ajax success, we can insert the image to the editor instance by this way在ajax成功时，我们可以通过这种方式将图像插入到编辑器实例中
success: function(url) {
$('#summernote').summernote("insertImage", url, 'filename');
},
Don't need to insert into the editor from sendFile(file, editor, welEditable) function param.不需要从sendFile(file, editor, welEditable)函数参数插入editor sendFile(file, editor, welEditable) 。 For my case this solves the porblem.就我而言，这解决了问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.