TinyMCE jak przesyłać wiele obrazów w poście w tym samym folderze, przesyłania i jak zatrzymać imagetools do tworzenia Blob

głosy
0

Mam 2 problemy nie wydają się znaleźć rozwiązanie. Używam laravel 5,6 Vue JS Komponent TinyMCE 4.9.1

Mam crated się vueJs komponent dla mojej postaci, która obejmuje TinyMCE i to wszystko wydaje się działać tak daleko. Po stronie serwera utworzyć folder dla każdego posta tworzę i nazwa folderu zostanie zapisany w tabeli post więc kiedy usunąć post folder z wszystkich zdjęć powinno zostać usunięte. Przede wszystkim, mam zrozumienia problemu. Pomyślałem, że jeśli ustawić automatic_uploads: false, Photo by nie być przesłane od razu, ale to robi. Jeśli tak się nie stanie, to mój pierwszy problem zostanie rozwiązany, ponieważ wszystkie zdjęcia będą przesyłane w tym samym czasie.

Pozwala dostarczać źródłowego dla lepszego zrozumienia:

moja vueJs Komponent

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

                }

           }


        }            
    }

Kontroler Obraz załadować obrazka:

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

I teraz mam następujący problem. I wybrać zdjęcie, folder zostanie utworzony Photo przesłany. Jeśli dodać kolejne zdjęcie nowy folder zostanie utworzony zamiast przesyłania go w tym samym folderze. Więc pomyślałem zwrócić NazwaFolderu z funkcji Upload z powrotem do komponentu, zapisz go w ukrytym Pole tekstowe i wysłał go z powrotem do Załaduj Metoda ponownie, niestety już nie mogę ustawić wartość w ukrytym polu wprowadzania. Pytanie teraz, jak to może być rozwiązane najlepiej? każdy mile widziany sugestia.

Drugi problem, ja zintegrował Plugin imagetools, ale jak tylko go używać okazuje obraz w Blob. znowu nie rozumiem instrukcje poprawnie, ale myślałem, dodając pod nim będzie przełączyć tę opcję, ale bez powodzenia. Więc może mam zapisane jako Blob i jednocześnie zapisywane w folderze i następnym razem tylko ścieżka jest zapisany w bazie danych obrazu. Jak mogę rozwiązać ten problem?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Utwórz 18/12/2018 o 11:02
źródło użytkownik
W innych językach...                            


1 odpowiedzi

głosy
0

W przypadku pierwszego problemu, zgodnie z TinyMCE dokumentacji automatic_upload zrobi nic, jeśli images_upload_url nie jest określona. W przypadku zastosowania images_upload_url wysyłania dostanie wyzwalane kiedy zadzwonisz editor.uploadImages ().

Odpowiedział 08/01/2019 o 14:19
źródło użytkownik

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