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

【问题标题】：Insert uploaded image to summernote editor将上传的图片插入summernote编辑器
【发布时间】：2019-08-25 01:00:14
【问题描述】：

我的目标是将上传的图片（本地文件）插入到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>

【问题讨论】：

标签： javascript jquery html wysiwyg summernote

【解决方案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

【讨论】：