Summernote js upload image

J'utilise summernote version 0.8.1 (en cours).

Ça marche. Mais une chose avec laquelle j'ai du mal. En insérant une image, plutôt que de mettre base64 dataURL, je souhaite télécharger l'image sur le serveur et insérer l'URL de l'image dans la base de données. C'est mon code:

<script> $(document).ready(function() { $('#summernote').summernote({ lang: 'fr-FR', height: 300, toolbar : [ ['style',['bold','italic','underline','clear']], ['font',['fontsize']], ['color',['color']], ['para',['ul','ol','paragraph']], ['link',['link']], ['picture',['picture']] ], onImageUpload: function(files, editor, welEditable) { for (var i = files.lenght - 1; i >= 0; i--) { sendFile(files[i], this); } } }); function sendFile(file, el) { var form_data = new FormData(); form_data.append('file',file); $.ajax ({ data: form_data, type: "POST", url: "../up.php", cache: false, contentType: false, processData: false, success: function(url) { $(el).summernote('editor.insertImage',url); } }) } }); </script> 

J'ai testé le script up.php et ce que cela signifie est de changer le nom du fichier et de renvoyer l'URL de l'image sous la forme "../photos/mypicture.jpg".

Le problème avec le code ci-dessus est que le […up.php ne semble même pas être appelé. J'ai couru cela dans les outils de développement de Firefox et je n'ai pas eu d'erreurs ou d'avertissements.

  • Comment définir la taille de la police dans Summernote?
  • Coller du contenu en tant que texte brut dans l'éditeur d'édition d'été
  • Comment traduire l'éditeur Summernote
  • 2 Solutions collect form web for “Summernote js upload image”

    Je l'ai fait fonctionner. Voici mon code. Utiliser summernote 0.8.1, c'est-à-dire la version actuelle.

     <script> $(document).ready(function() { var IMAGE_PATH = 'http://www.path/to/document_root/'; // the exact folder in the document_root // will be provided by php script below $('#summernote').summernote({ lang: 'fr-FR', // <= nobody is perfect :) height: 300, toolbar : [ ['style',['bold','italic','underline','clear']], ['font',['fontsize']], ['color',['color']], ['para',['ul','ol','paragraph']], ['link',['link']], ['picture',['picture']] ], callbacks : { onImageUpload: function(image) { uploadImage(image[0]); } } }); function uploadImage(image) { var data = new FormData(); data.append("image",image); $.ajax ({ data: data, type: "POST", url: "../up.php",// this file uploads the picture and // returns a chain containing the path cache: false, contentType: false, processData: false, success: function(url) { var image = IMAGE_PATH + url; $('#summernote').summernote("insertImage", image); }, error: function(data) { console.log(data); } }); } }); </script> 

    Voici mon up.php:

     <?php require('admchir/nettoie.php'); // nettoie.php removes the French special chars and spaces $image = nettoie($_FILES['image']['name']); $uploaddir = 'photos/'; // that's the directory in the document_root where I put pics $uploadfile = $uploaddir . basename($image); if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) { echo$uploadfile; } else { echo "Lo kol kakh tov..."; // <= nobody is perfect :) } ?> 

    En recherchant cela sur internet, j'ai eu l'impression que Summernote a beaucoup changé entre les différentes versions, mais n'a pas trouvé l'exemple complet de la version actuelle. J'espère que ça aide quelqu'un.

    C'est ainsi que je l'ai intégré avec Codeigniter 3 , Summernote 0.8.1 :

    Je publie ma solution de travail ici pour que quelqu'un d'autre puisse obtenir de l'aide ou une idée sur la façon d'implémenter Summernote avec le téléchargement d'image dans CI 3 avec CSRF.

    Le code javascript:

     <!-- include libraries(jQuery, bootstrap) --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <!-- include summernote css/js--> <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script> <script> $(document).ready(function () { $('#content').summernote({ height: 400, callbacks: { onImageUpload: function (image) { sendFile(image[0]); } } }); function sendFile(image) { var data = new FormData(); data.append("image", image); //if you are using CI 3 CSRF data.append("<?= $this->security->get_csrf_token_name() ?>", "<?= $this->security->get_csrf_hash() ?>"); $.ajax({ data: data, type: "POST", url: "<?= site_url('summernote-image-upload') ?>", cache: false, contentType: false, processData: false, success: function (url) { var image = url; $('#content').summernote("insertImage", image); }, error: function (data) { console.log(data); } }); } }); </script> 

    La partie codeigniter:

      //add this line in your routes.php $route['summernote-image-upload'] = 'welcome/summernote-image-upload'; //now add this method in your Welcome.php Controller: function summernote_image_upload() { if ($_FILES['image']['name']) { if (!$_FILES['image']['error']) { $ext = explode('.', $_FILES['image']['name']); $filename = underscore($ext[0]) . '.' . $ext[1]; $destination = './public/images/summernote/' . $filename; //change path of the folder... $location = $_FILES["image"]["tmp_name"]; move_uploaded_file($location, $destination); echo base_url() . 'public/images/summernote/' . $filename; } else { echo $message = 'The following error occured: ' . $_FILES['image']['error']; } } } 

    La partie HTML:

      <textarea name="content" id="content"><?= html_entity_decode(set_value('content')) ?></textarea> <?= form_error('content') ?> 

    Notez si vous rencontrez un problème avec CSRF (pour quelque raison que ce soit), vous pouvez exclure l'upload d'ajax d'summernote dans votre fichier config.php :

      $config['csrf_exclude_uris'] = array('summernote-image-upload'); 
    JavaScript rend le site Web intelligent, beauté et facile à utiliser.