Is there an image upload plugin for Summernote?

Asked

Viewed 909 times

-1

I want to use Summernote and I need to upload images, but I do not know how to do, there is some plugin for this (free preference or with accessible value)?

upload wysiwyg summernote

  • @Guilhermenascimento, I edited the question. I can’t understand the question classification criteria of the site. The site could not suggest improving the question before denying me? Then suddenly block me and I can’t ask any more questions just because I didn’t know how to make one.

  • It wasn’t a criterion problem, it was the way you write that you’re confused. Who negative are users, people can negative for any reason, are usually people who have no power to close that negative, the negative is not to say that your question is useless, is to say "There’s something very wrong with your question", Don’t get this wrong. Your question has a lot of written stuff that doesn’t make any difference to who will answer, you get lost in the words and so it is difficult to understand what you want. However I understood the problem and I will edit the question...

  • Shit, I could have sworn days ago I wanted to use Summernote and I didn’t see that option so I came here to ask. The.o Thanks for the @Guilhermenascimento. Sorry for the inconvenience. I think the confusion of words is due to the fact that I’m sleeping just over 4 hours a night.

  • I honestly do not know which is the best option, currently I am saving the images in a folder on the server and not in the bank. But if saving in the bank is a good option then I believe I can change that. Anyway I believe the question is answered, it was my lack of attention.

  • Neimeg sorry the delay was difficult to make the examples, see my answer and tell me if it works like this for you.

1 answer

2


The editor Summernote already have option natively to convert the image to protocol data: (Data URI Scheme) so the image goes "embedded" with the text:

$(document).ready(function() {
  $('#exemplo').summernote({ height: 300 });
});
<!-- jquery, bootstrap -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- add summernote -->
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-ko-KR.min.js"></script>


<div id="exemplo"></div>

Then click on this icon and the pop-up will appear:

summernote image select

Upload to the server

However it is preferable not to use Data URI Scheme then there is an event on Summernote which allows you to upload using Ajax, as Summernote is a JS library that requires jQuery so I’ll show you an example of uploading with jQuery:

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
        var data = new FormData();
        data.append("file", files[0]);
        $.ajax({
            data: data,
            type: "POST",
            url: "upload.php", //arquivo de upload ou rota do laravel
            success: function(data) {
                if (data !== "") {
                  var img = new Image();
                  img.src = data;
                  $summernote.summernote('insertNode', img);
                }
            }
        });
    }
  }
});

I believe you use PHP (another question you asked about PHP) so upload.php should look like this:

<?php
//Caminho absoluto do local que vai salvar as fotos
$pasta    = '/home/user/public_html/storage/upload/';

//URL que vai ser gerada
$pastaurl = 'http://meusite.com/storage/upload/';

$tmp_name = $_FILES['arquivo']['tmp_name'];

//Pega o mimetype
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $tmp_name);
finfo_close($finfo);

//Só permite upload de imagens
if (strpos($mime, 'image/') === 0) {

   //Gera um nome que não se repete para imagem e adiciona a extensão conforme o mimetype
   $file = time() . '.' . str_replace('image/', '', $mime);

   if (move_uploaded_file($tmp_name, $pasta . '/' . $file)) {
       return $pastaurl . $file;
   }
}

Documentation Summernote:

Reasons not to use Data URI Scheme in WYSIWYG editors

If the content of the editor is saved in the database then it might actually be better to use "normal upload", another protocol problem data: is the rendering, follows links that can help explain:

Browser other questions tagged upload wysiwyg summernote

You are not signed in. Login or sign up in order to post.