TinyMce, wie mehrere Bilder in einem Beitrag in gleiche Upload-Ordner zu laden und wie Imagetools zu stoppen Blob zu erstellen

stimmen
0

Ich habe 2 Probleme Ich kann nicht für eine Lösung zu finden scheinen. Ich benutze Laravel 5.6 Vue JS Component TinyMCE 4.9.1

Ich habe eine vueJs Komponente für meine Form crated die TinyMce enthält und es scheint alles so weit zu arbeiten. Auf der Server - Seite erstelle ich einen Ordner für jeden Beitrag ich erstellen und die Ordnernamen im Post - Tabelle so gespeichert wird , wenn ich einen Post löschen Sie den Ordner mit allen Fotos gelöscht werden sollen. Zunächst einmal, ich habe ein Problem Verständnis. Ich dachte, wenn ich gesetzt automatic_uploads: false, würde das Bild nicht sofort hochgeladen werden, aber es tut. Wenn das nicht geschehen würde, dann wäre mein erstes Problem behoben werden, weil alle Fotos gleichzeitig hochgeladen werden würden.

Hiermit kann der Sourcecode für ein besseres Verständnis liefern:

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

                }

           }


        }            
    }

Der Bildcontroller das Bild laden:

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

Ich habe nun folgendes Problem. Ich wähle ein Foto, ein Ordner, um das Foto hochgeladen erstellt wird. Wenn ich hinzufügen, wird ein anderes Bild ein neuer Ordner erstellt, anstatt sie in die gleichen Ordner zu. Also dachte ich, das Ordner von der Upload-Funktion, um wieder zurück auf die Komponente, es in einem versteckten Eingabefeld speichern und schickte es zurück in der Upload-Methode wieder, leider scheitere ich schon den Wert in das versteckte Eingabefeld zu setzen. Frage ist nun, wie kann das gelöst werden am besten? jeder Vorschlag willkommen.

Zweites Problem, integrierte ich das Plugin Imagetool, aber sobald ich es es das Bild in ein Blob verwandelt. wieder verstehe ich nicht, die Anweisungen richtig, aber ich dachte, nach unten, damit er dem Hinzufügen dieser ausgeschaltet würde wechseln, aber kein Glück. So könnte ich ein Bild als Blob und zugleich in einem Ordner und das nächste Mal gespeichert gespeichert habe nur der Pfad in der Datenbank gespeichert wird. Wie kann ich dieses Problem lösen?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Veröffentlicht am 18/12/2018 um 11:02
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Für das erste Problem, nach tinymce Dokumentation automatic_upload wird nichts tun , wenn images_upload_url nicht angegeben ist. Wenn Sie implementieren images_upload_url Upload erhalten ausgelöst , wenn Sie editor.uploadImages () aufrufen.

Beantwortet am 08/01/2019 um 14:19
quelle vom benutzer

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