TinyMCE come caricare più immagini in un messaggio nella stessa cartella di upload e come smettere di imagetools per creare Blob

voti
0

Ho 2 problemi che non riesco a trovare una soluzione per. Io uso laravel 5.6 Vue JS Componente TinyMCE 4.9.1

Ho ingabbiati un componente vueJs per la mia forma che include TinyMCE e tutto sembra funzionare finora. Sul lato server creo una cartella per ogni post che creo e il nome cartella viene salvato nella tabella post in modo che quando si elimina un messaggio la cartella con tutte le foto devono essere cancellati. Prima di tutto, ho un problema di comprensione. Ho pensato che se ho impostato automatic_uploads: false, la foto non sarebbe caricato subito, ma lo fa. Se ciò non sarebbe successo, allora il mio primo problema sarebbe stato risolto, perché tutte le foto sarebbero state caricate allo stesso tempo.

Consente di fornire il codice sorgente per una migliore comprensione:

la mia componente vueJs

<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));

                }

           }


        }            
    }

Il controller immagine per caricare l'immagine:

 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]);
 }

Ora ho ottenuto il seguente problema. Ho selezionare una foto, una cartella viene creato il Foto caricata. Se posso aggiungere un altro Photo una nuova cartella viene creato, invece di caricarlo nella stessa cartella. Così ho pensato di restituire il Foldername dalla Carica Function Torna Component, salvarlo in un input nascosto campo e lo ha inviato di nuovo alla Upload metodo di nuovo, purtroppo non riesco già a impostare il valore nel campo di immissione nascosti. Domanda ora, come può che essere risolto meglio? qualsiasi benvenuto suggerimento.

Secondo problema, ho integrato il plugin imagetools, ma non appena lo uso si trasforma l'immagine in un Blob. ancora una volta non capisco le istruzioni in modo corretto, ma ho pensato che con l'aggiunta di sotto di esso sarebbe cambiare questa via, ma senza fortuna. Così potrei avere un'immagine salvata come Blob e allo stesso tempo salvato in una cartella e la prossima volta solo il percorso viene salvato nel database. Come posso risolvere questo?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
È pubblicato 18/12/2018 alle 09:02
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

Per il primo problema, secondo TinyMCE documentazione automatic_upload farà nulla se images_upload_url non è specificato. Se si implementa images_upload_url caricati otterrà innescato ogni volta che si chiama editor.uploadImages ().

Risposto il 08/01/2019 a 12:19
fonte dall'utente

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