JSFiddle - React, Tailwind, and code Playground

by no2don

HTML

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>


<div id="summernote">

</div>

<div id="div_result">

</div>

JavaScript

//這裡要自己換自己的 client id 
//當年看到這 client id 時候，我應該已經刪掉了

var imgUrClientId='df8a2b4f2a1f1a9';

$('#summernote').summernote({
  height: 200,
  toolbar: [
    ['insert', [ 'picture']],
    ['view', ['codeview']],
  ],
  callbacks: {
    onImageUpload: function(image) {
      uploadImage(image[0], this);
    }
  }
});

function GetBase64String(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

function uploadImage(image, obj) {

  var base64Str;
  GetBase64String(image).then(
    data => {
      var reqData = new FormData();

      reqData.append("image", data.split(',')[1]);
      var settings = {
        "url": "https://api.imgur.com/3/image",
        "method": "POST",
        "dataType": 'json',
        "timeout": 0,
        "headers": {
          "Authorization": "Client-ID "+imgUrClientId
        },
        "processData": false,
        "mimeType": "multipart/form-data",
        "contentType": false,
        "data": reqData
      };

      $.ajax(settings).done(function(response) {
        var imgStr = $('<img>').attr('src', response.data.link).attr('style', 'width:50%;cursor:pointer');

        var ha = $('<a>').attr('href', response.data.link).attr('target', '_blank');
        $(ha).append($(imgStr));
        $(obj).summernote("insertNode", ha[0]);
      });

    }
  );
}