TinyMCE cum să încărcați mai multe imagini într-un post în același dosar de încărcare și cum să se oprească imagetools pentru a crea blob

voturi
0

Am 2 probleme nu pot par să găsească o soluție. Eu folosesc Laravel 5.6 Vue JS Componenta TinyMCE 4.9.1

Am crated o componentă vueJs pentru forma mea , care include TinyMCE și totul pare să funcționeze până în prezent. Pe partea de server am crea un dosar pentru fiecare post I a crea și numele dosarului se salvează în Post tabelul astfel încât atunci când am șterge un post dosarul cu toate fotografiile ar trebui să fie eliminate. În primul rând, am o problemă de înțelegere. M - am gândit că , dacă am stabilit automatic_uploads: false, Photo nu ar fi încărcat imediat, dar o face. În cazul în care nu s - ar întâmpla, atunci prima mea problemă ar fi stabilit, deoarece toate Fotografiile vor fi încărcate în același timp.

Permite alimentarea sourcecode pentru o mai bună înțelegere:

vueJs Componenta mea

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

                }

           }


        }            
    }

Controlorul de imagine pentru a încărca imaginea:

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

Am luat acum următoarea problemă. Am selectați o fotografie, un dosar devine creat fotografie încărcată. Dacă aș adăuga o altă fotografie un nou dosar creat în loc de a se încărca-l în același folder. Asa ca m-am gândit să returneze FOLDERNAME de încărcare Funcția înapoi la componenta, salvați-l într-o intrare ascunsă de câmp și a trimis-o înapoi la metoda de încărcare din nou, din păcate, am deja nu pentru a seta valoarea în câmpul de intrare ascunse. Intrebare acum, cum poate fi rezolvată cel mai bine? orice sugestie de bun venit.

A doua problemă, am integrat pluginul imagetools, dar imediat am folosi-l se transformă imaginea într-o pată de cerneală. din nou, eu nu înțeleg instrucțiunile corect, dar am crezut că prin adăugarea de mai jos ar schimba acest off, dar nici noroc. Așa că s-ar putea avea o imagine salvată ca o pată de cerneală și, în același timp, salvate într-un dosar și data viitoare numai calea este salvat în baza de date. Cum pot rezolva acest lucru?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Întrebat 18/12/2018 la 11:02
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
0

Pentru prima problemă, în conformitate cu documentația TinyMCE automatic_upload va face nimic dacă images_upload_url nu este specificat. Dacă implementați images_upload_url de încărcare va primi declanșat de fiecare dată când apelați editor.uploadImages ().

Publicat 08/01/2019 la 14:19
sursa de către utilizator

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