I want to use Summernote and I need to upload images, but I do not know how to do it, is there any plugin for this (preferably free or affordable)?
I want to use Summernote and I need to upload images, but I do not know how to do it, is there any plugin for this (preferably free or affordable)?
The SummerNote editor already has option natively to convert the image to data:
protocol ( Data URI scheme ) so the image goes "embedded" with the text:
$(document).ready(function() {
$('#exemplo').summernote({ height: 300 });
});
<link href="http://summernote.org/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="http://summernote.org/bower_components/jquery/dist/jquery.js"></script><linkhref="http://summernote.org/bower_components/summernote/dist/summernote.css" rel="stylesheet"/>
<script src="http://summernote.org/bower_components/summernote/dist/summernote.js"></script><scriptsrc="http://summernote.org/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<div id="exemplo"></div>
Then click on this icon and the pop-up will appear:
Howeveritispreferablenottouse Data URI scheme , so there is an event in SummerNote that lets you upload using Ajax, as SummerNote is a JS library that requires jQuery so I'll show you an example upload 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 think you use PHP (another question of yours was 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;
}
}
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 problem with the
data:
protocol is rendering, here are links that can help explain: