Question

我有2个问题，似乎无法解决。我用 Laravel 5.6 Vue JS组件 TinyMCE 4.9.1

我为我的表单创建了一个vueJs组件，其中包括TinyMce，到目前为止，它似乎都可以正常工作。在服务器端，我为创建的每个帖子创建一个文件夹，并且文件夹名称保存在帖子表中，因此当我删除帖子时，应删除包含所有照片的文件夹。首先，我有一个理解问题。我以为，如果我设置 automatic_uploads：false， 该照片不会立即上传，但可以上传。如果那不会发生，那么我的第一个问题将得到解决，因为所有照片都将同时上传。

让我们提供源代码以便更好地理解：

我的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 Function返回到Component，将其保存在隐藏的Input Field中，然后再次将其发送回Upload Method，不幸的是，我无法将Value设置为Hidden Input Field。现在的问题是，如何才能最好地解决？任何建议都欢迎。

第二个问题，我集成了imagetools插件，但是一旦使用它，它就会将Image变成Blob。再次，我不正确地理解说明，但是我认为通过在其下面添加将关闭此功能，但是没有运气。因此，我可能会将图像另存为Blob，同时又将其保存在文件夹中，并且下次仅将路径保存在数据库中。我该怎么解决？

  images_dataimg_filter: function(img) {
                return false;
               // return img.hasAttribute('internal-blob');
            },

Answer 1

对于第一个问题，根据tinymce文档automatic_upload，如果未指定images_upload_url，则将不执行任何操作。如果您实现了images_upload_url，则每次调用editor.uploadImages（）都会触发上传。

TinyMce如何将帖子中的多个图像上传到同一上传文件夹中，以及如何停止imagetools创建Blob

1 个答案: