TinyMCE, как загрузить несколько изображений в сообщение в ту же папку загрузки и как остановить imagetools создать Blob

голоса
0

У меня 2 проблемы я не могу показаться, чтобы найти решение. Я использую Laravel 5,6 Vue JS Компонент TinyMCE 4.9.1

Я упаковал в vueJs компонент для моей формы , которая включает в себя TinyMCE , и все это , кажется, работает до сих пор. На стороне сервера я создаю папку для каждого сообщения я создаю и имя папки будет сохранена в почтовой таблице поэтому , когда я удалить сообщение в папку со всеми Фотографии должны быть удалены. Прежде всего, у меня есть понимание проблемы. Я подумал , что если я устанавливаю automatic_uploads: ложную, Фото- не будет загружен сразу, но это делает. Если этого не произойдет, то моя первая проблема была бы неподвижна, потому что все фотографии будут загружены в то же время.

Позволяет поставить Исходник- для лучшего понимания:

мой 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));

                }

           }


        }            
    }

Контроллер изображения для загрузки изображения:

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

Теперь я получил следующую задачу. Я выбираю фото, папка будет создаваться на Загружена. Если добавить еще фото новая папка будет создаваться вместо загрузки его в ту же папку. Так я думал, чтобы вернуть FOLDERNAME из Upload функции обратно к компоненту, сохранить его в скрытом поле ввода и отправил его обратно в Upload Method снова, к сожалению, я не уже установить значение в Hidden поле ввода. Вопрос сейчас, как это может быть решена лучше всего? любое предложение приветствуется.

Вторая проблема, я интегрировал imagetools плагин, но как только я использую его, что превращает изображение в Blob. опять я не понимаю инструкции правильно, но я думал, добавив ниже него переключил бы это прочь, но не повезло. Так что, возможно, есть изображение, сохраненное как Blob и в то же время сохраняется в папке и в следующий раз только путь сохраняется в базе данных. Как я могу решить эту проблему?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Задан 18/12/2018 в 09:02
источник пользователем
На других языках...                            


1 ответов

голоса
0

Для вашей первой задачи, в соответствии с TinyMCE документации automatic_upload не будет делать ничего , если images_upload_url не указано. При реализации images_upload_url загрузка будет получить срабатывает всякий раз , когда вы звоните editor.uploadImages ().

Ответил 08/01/2019 в 12:19
источник пользователем

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