3

My objective is to insert the uploaded image(local file) to the summernote editor.

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.

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>
LogicalAnt
  • 907
  • 3
  • 12
  • 28

2 Answers2

2

You can try setting 'text/html' mode

Note: There is no editor, welEditable params in onImageUpload callback

$(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

// getting old html 
let html = $('.summernote').summernote('code'); 

// setting updated html with image url
$('.summernote').summernote('code', html + '<img src="' + url + '"/>');
User863
  • 19,346
  • 2
  • 17
  • 41
  • I was following from [here](https://github.com/summernote/summernote/issues/72#issuecomment-27676684) – LogicalAnt Apr 03 '19 at 14:31
  • @unreleased that is posted on `2013`. but you are using the latest version – User863 Apr 03 '19 at 14:33
  • Actually, I need to upload image via ajax request to a specific folder and attach the image URL to the editor. Converting the image to base64 and attach to the editor won't solve the problem. It would be helpful for me if you can save the image via ajax request.@Aswin Kumar – LogicalAnt Apr 04 '19 at 07:41
  • Thanks, @Aswin Kumar for your support. +1 for your time. I've solved the issue in a bit different way :) – LogicalAnt Apr 04 '19 at 10:01
2

On ajax success, we can insert the image to the editor instance by this way

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

Don't need to insert into the editor from sendFile(file, editor, welEditable) function param. For my case this solves the porblem.

Helpful comment

LogicalAnt
  • 907
  • 3
  • 12
  • 28