Tinymce comment télécharger plusieurs images dans un message dans un même dossier de téléchargement et comment arrêter imagetools pour créer Blob

voix
0

J'ai 2 problèmes Je ne peux pas sembler trouver une solution pour. J'utilise Laravel 5.6 Composant JS Vue TinyMCE 4.9.1

Je crated un composant vueJs pour mon formulaire qui comprend tinymce et tout semble fonctionner jusqu'à présent. Du côté du serveur , je crée un dossier pour chaque poste que je crée et le nom du dossier est enregistré dans le tableau après quand je supprimer un message du dossier avec toutes les photos doivent être supprimés. Tout d' abord, j'ai un problème de compréhension. Je pensais que si je mets automatic_uploads: faux, la photo ne serait pas chargé tout de suite, mais il le fait. Si cela ne se produirait pas, alors mon premier problème serait résolu, parce que toutes les photos seraient téléchargées en même temps.

Permet de fournir le code source pour une meilleure compréhension:

mon vueJs Component

<template>
<div>
  <form method=post action= @submit.prevent=onSubmit>
  <fieldset class=add-form><legend class=add-form>
  <h3>Article Details</h3></legend>
  <label class=required for=fname>Headline</label>
  <input class=form-control  v-model=post.title id=fname>
  <span class=invalid-feedback v-text=errors.get('title')></span>
  <input class=form-control  v-model=folder id=folder>
  <tinymce v-model=post.body
    :plugins=myPlugins 
    :toolbar =myToolbar1
    :init=myInit
  >
  </tinymce>

<script>
import Editor from '@tinymce/tinymce-vue';
// Import TinyMCE
import tinymce from 'tinymce/tinymce';
// A theme is also required
import 'tinymce/themes/modern/theme';


export default{
    components: {
           'tinymce': Editor // <- Important part
    },

    data () { 
            return { 
            name: 'app',
            folder: null,
            myModel:'',
            theme: modern,
            myToolbar1: 'undo redo | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | hr bullist numlist outdent indent | link image table | code preview',
            myPlugins: link image code preview imagetools table lists textcolor hr wordcount,

            myInit: {
                setup: function(editor){
                    automatic_uploads: false, 
                    editor.on('NodeChange', function (e) {
                      if(e.element.tagName === IMG){          
                        //e.element.setAttribute(data-original, e.element.currentSrc);
                       // e.element.setAttribute(src, newSrc);
                      }
                    });

                },

                images_dataimg_filter: function(img) {
                    return false;
                    return img.hasAttribute('internal-blob');
                },
                convert_urls : false,
                height:500,
                automatic_uploads: false, 
                images_upload_base_path: '/../../',
                relative_urls : false,


                // override default upload handler to simulate successful upload
                images_upload_handler: function (blobInfo, success, failure) {
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '/memberarea/api/upload-image');
                    var token = document.head.querySelector([name=csrf-token]).content;
                    xhr.setRequestHeader(X-CSRF-Token, token);

                    xhr.onload = function() {
                        var json;
                        var folder2;
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);

                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        success(json.location);

                        this.folder = json.folder;
                    };

                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    xhr.send(formData);
                }                
            },               
            result:[],
            post: {     
                title: '',
                teaser:'',
                body: '',
                tags:[],

            }, 

            errors: new Errors(),
            availableTags:'',
            tags:[],

             }},

    computed: {},

    mounted: function () {
            this.getTags();
        },

        methods: {

            getTags(){

                axios.get('/api/tags/id')
                         .then((response) => {
                            this.availableTags = response.data;
                        })
                        .catch(function () {
                        });

            },

       onSubmit(){
       {      
                let uri = '/admin/news/save-post';

                var input = this.post;


                    axios.post(uri, input)
                        .then((response) => {
                          window.location.href = response.data.redirect;
                        })
                       .catch(error => this.errors.record(error.response.data.errors));

                }

           }


        }            
    }

Le contrôleur d'image pour télécharger l'image:

 public function uploadImages()
 {
    $folder = uniqid();
    if (!\Storage::exists($folder)) {
            \Storage::disk('posts')->makeDirectory($folder);
    }

    $imgpath = \Storage::disk('posts')->put($folder,request()->file('file'));

    return \Response::json(['folder' => $folder, 'location' => '/storage/uploads/posts/'.$imgpath]);
 }

J'ai maintenant obtenu le problème suivant. Je sélectionne une photo, un dossier est créé la photo téléchargée. Si j'ajouter une autre photo un nouveau dossier est créé au lieu de le télécharger dans le même dossier. Donc, je pensais retourner le Foldername de la fonction Retour à Ajouter le composant, l'enregistrer dans une entrée cachée champ et renvoyé à la méthode Envoyer à nouveau, malheureusement je ne déjà pour définir la valeur dans le champ d'entrée cachée. Question maintenant, comment cela peut-il être résolu le mieux? toute suggestion de bienvenue.

Deuxième problème, j'ai intégré le plugin imagetools, mais dès que je l'utilise, il transforme l'image en un Blob. encore une fois je ne comprends pas bien les instructions, mais je pensais en ajoutant en dessous opteraient ceci, mais pas de chance. Donc, je pourrais avoir une image enregistrée en tant que Blob et en même temps enregistré dans un dossier et la prochaine fois que le chemin est enregistré dans la base de données. Comment puis-je résoudre ça?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Créé 18/12/2018 à 11:02
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Pour votre premier problème, d' après la documentation tinymce automatic_upload fera rien si images_upload_url n'est pas spécifié. Si vous implémentez images_upload_url téléchargement se déclenchera chaque fois que vous appelez editor.uploadImages ().

Créé 08/01/2019 à 14:19
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more