将上传的图片插入到summernote编辑器

Question

我的目标是将上传的图像（本地文件）插入到 Summernote 编辑器中。

图片上传成功，只需插入编辑器即可。

我试图控制台记录编辑器实例，但它显示未定义。 如果我可以将编辑器实例传递给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>

Answer 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 + '"/>');

Answer 2

在ajax成功时，我们可以通过这种方式将图像插入到编辑器实例中

success: function(url) {
  $('#summernote').summernote("insertImage", url, 'filename');
},

不需要从sendFile(file, editor, welEditable)函数参数插入editor sendFile(file, editor, welEditable) 。 就我而言，这解决了问题。

有用的评论

将上传的图片插入到summernote编辑器

问题描述

2 个解决方案

解决方案1
2 2019-04-03 14:24:55

解决方案2
2 已采纳 2019-04-04 09:59:01

将上传的图片插入到summernote编辑器

问题描述

2 个解决方案

解决方案1 2 2019-04-03 14:24:55

解决方案2 2 已采纳 2019-04-04 09:59:01

解决方案1
2 2019-04-03 14:24:55

解决方案2
2 已采纳 2019-04-04 09:59:01