Блог

Главная - Вопросы по программированию - Вставить загруженное изображение в редактор summernote

Вставить загруженное изображение в редактор summernote

#javascript #jquery #html #wysiwyg #summernote

#javascript #jquery #HTML #wysiwyg #summernote

Вопрос:

Моя цель — вставить загруженное изображение (локальный файл) в редактор summernote.

Загрузка изображения прошла успешно, осталось только вставить в редактор.

Я пытался консольно зарегистрировать экземпляр редактора, но он показывает undefined. Если я смогу передать экземпляр редактора sendFile функции, я думаю, проблема будет решена.

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>

Ответ №1:

Вы можете попробовать настроить 'text/html' mode

Примечание: В editor обратном вызове нет welEditable , onImageUpload параметров

 $(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   '"/>');

Комментарии:

1. Я следовал отсюда

2. @неизданное, размещенное на 2013 . но вы используете последнюю версию

3. На самом деле, мне нужно загрузить изображение с помощью ajax-запроса в определенную папку и прикрепить URL изображения к редактору. Преобразование изображения в base64 и прикрепление к редактору не решит проблему. Мне было бы полезно, если бы вы могли сохранить изображение с помощью ajax-запроса. @Aswin Kumar

4. Спасибо, @Aswin Kumar за вашу поддержку. 1 за ваше время. Я решил проблему немного другим способом 🙂

Ответ №2:

При успешном использовании ajax мы можем вставить изображение в экземпляр редактора таким образом

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

Не нужно вставлять в параметр функции editor from sendFile(file, editor, welEditable) . В моем случае это решает проблему.

Полезный комментарий