TinyMce cómo cargar varias imágenes en un mensaje en misma carpeta de carga y cómo detener imagetools para crear Blob

votos
0

Tengo 2 problemas que parece que no puede encontrar una solución para. Yo uso laravel 5.6 Vue JS Componente TinyMCE 4.9.1

He crated un componente vueJs para mi formulario que incluye TinyMce y todo parece funcionar hasta el momento. En el lado del servidor se crea una carpeta para cada puesto creo y el nombre de carpeta se guarda en el Cuadro de puestos de modo que cuando elimino un mensaje de la carpeta con todas las fotos deben ser eliminados. En primer lugar, Tengo un problema de comprensión. Pensé que si fijo automatic_uploads: falsas, la foto podría no ser subido de inmediato, pero lo hace. Si eso no pasaría, entonces mi primer problema sería fijo, ya que todas las fotos se pueden cargar al mismo tiempo.

Vamos a suministrar el código fuente para una mejor comprensión:

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

                }

           }


        }            
    }

El controlador de imagen para cargar el archivo:

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

ahora tengo el siguiente problema. Me seleccionar una foto, una carpeta se crea la Foto subida. Si añado otro Photo un nuevo carpeta se crea en lugar de subir en la misma carpeta. Así que pensé que devolver el Nombrecarpeta de la función de carga de nuevo al componente, guardarlo en un campo oculto y enviar de vuelta al Método de carga de nuevo, por desgracia, ya no fijan el valor en el campo Entrada oculta. Pregunta ahora, ¿cómo puede ser resuelto mejor? cualquier sugerencia de bienvenida.

El segundo problema, integré el Plugin imagetools, pero tan pronto lo uso que convierte la imagen en una burbuja. de nuevo, no entiendo las instrucciones correctamente, pero pensé añadiendo a continuación que cambiaría esto adelante, pero no hubo suerte. Por lo que podría tener una imagen guardada como una gota y, al mismo tiempo que se ahorra en una carpeta y la próxima vez sólo la ruta se guarda en la base de datos. ¿Como puedo resolver esto?

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },
Publicado el 18/12/2018 a las 11:02
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Para su primer problema, de acuerdo con la documentación tinymce automatic_upload no hará nada si no se especifica images_upload_url. Si implementa images_upload_url carga se disparará cada vez que llame editor.uploadImages ().

Respondida el 08/01/2019 a las 14:19
fuente por usuario

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