Yii2 Tinymce小工具文件/圖像上傳問題

Question

我正在使用DosAmigos Yii2 Tinymcs小工具在文本區域啓動tinymce。由於我使用的是一個小部件，所以啓動安裝程序使用PHP（見下文）。我的問題是，'file_picker_callback'需要一個JavaScript函數不是一個字符串工作。例如，在引號中，'file_picker_callback'=>「function（callback，value，meta）{...}」在瀏覽器控制檯中給我一個「Uncaught TypeError：fileBrowserCallback.call不是函數」的錯誤。但是，如果沒有引號，'file_picker_callback'=>函數（callback，value，meta）{...}在PHP中語法上不正確，因此會生成語法錯誤。我如何在PHP中執行這部分初始化？如果我不能在PHP中完成，那麼javascript/jQuery需要去初始化'file_picker_callback'。我如何把它放在那裏？

<?= $form->field($model, 'page_content')->widget(TinyMce::className(), [ 
    'options' => ['rows' => 50], 
    'language' => 'en_CA', 
    'clientOptions' => [ 
     //'inline' => true, 
     'content_css' => $content_css, 
     'plugins' => [ 
      "advlist autolink lists link charmap print preview anchor", 
      "searchreplace visualblocks code fullscreen", 
      "insertdatetime media table contextmenu paste", 
      "image imagetools spellchecker visualchars textcolor", 
      "autosave colorpicker hr nonbreaking template" 
     ], 
     'toolbar1' => "undo redo | styleselect fontselect fontsizeselect forecolor backcolor | bold italic", 
     'toolbar2' => "alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     'image_advtab' => true, 
     'templates' => [ 
      [ 'title'=>'Test template 1', 'content'=>'Test 1' ], 
      [ 'title'=>'Test template 2', 'content'=>'Test 2' ] 
     ], 
     'visualblocks_default_state'=>true, 

     'images_upload_url'=>'postAcceptor.php', 
     // here we add custom filepicker only to Image dialog 
     'file_picker_types'=>'image', 
     // and here's our custom image picker 
     'file_picker_callback'=>"function(callback, value, meta) { 
      var input = document.createElement('input'); 
      input.setAttribute('type', 'file'); 
      input.setAttribute('accept', 'image/*'); 

      input.onchange = function() { 
       var file = this.files[0]; 

       var reader = new FileReader(); 
       reader.readAsDataURL(file); 
       reader.onload = function() { 
        var id = 'blobid' + (new Date()).getTime(); 
        var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
        var blobInfo = blobCache.create(id, file, reader.result); 
        blobCache.add(blobInfo); 

        // call the callback and populate the Title field with the file name 
        callback(blobInfo.blobUri(), { title: file.name }); 
       }; 
      }; 
      input.click(); 
     }" 
    ] 
]);?> 

Answer 1

對於那些希望看到工作答案的人，我已經在下面發佈了一個。 @InsaneSkull給出了鍵（使用JsExpression）來讓代碼工作。

$myDateTime = new DateTime(); 
    $content_css = [ 
      '/backend/assets/3be5f0f5/css/bootstrap.css?' . $myDateTime->getTimestamp(), ]; 

    <?= $form->field($model, 'page_content')->widget(TinyMce::className(), [ 
    'options' => ['rows' => 50], 
    'language' => 'en_CA', 
    'clientOptions' => [ 
     //'inline' => true, 
     //$content_css needs to be defined as "" or some css rules/files 
     'content_css' => $content_css, 
     'plugins' => [ 
      "advlist autolink lists link charmap print preview anchor", 
      "searchreplace visualblocks code fullscreen", 
      "insertdatetime media table contextmenu paste", 
      "image imagetools spellchecker visualchars textcolor", 
      "autosave colorpicker hr nonbreaking template" 
     ], 
     'toolbar1' => "undo redo | styleselect fontselect fontsizeselect forecolor backcolor | bold italic", 
     'toolbar2' => "alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     'image_advtab' => true, 
     'templates' => [ 
      [ 'title'=>'Test template 1', 'content'=>'Test 1' ], 
      [ 'title'=>'Test template 2', 'content'=>'Test 2' ] 
     ], 
     'visualblocks_default_state'=>true, 
     'image_title' => true, 
     'images_upload_url'=>'postAcceptor.php', 
     // here we add custom filepicker only to Image dialog 
     'file_picker_types'=>'image', 
     // and here's our custom image picker 
     'file_picker_callback'=> new JsExpression("function(callback, value, meta) { 
      var input = document.createElement('input'); 
      input.setAttribute('type', 'file'); 
      input.setAttribute('accept', 'image/*'); 

      //If this is not included, the onchange function will not 
      //be called the first time a file is chosen 
      //(at least in Chrome 58) 
      var foo = document.getElementById('cms-page_content_ifr'); 
      foo.appendChild(input); 

      input.onchange = function() { 
       //alert('File Input Changed'); 
       //console.log(this.files[0]); 

       var file = this.files[0]; 

       var reader = new FileReader(); 
       reader.readAsDataURL(file); 
       reader.onload = function() { 
        // Note: Now we need to register the blob in TinyMCEs image blob 
        // registry. In the next release this part hopefully won't be 
        // necessary, as we are looking to handle it internally. 

        //Remove the first period and any thing after it 
        var rm_ext_regex = /(\.[^.]+)+/; 
        var fname = file.name; 
        fname = fname.replace(rm_ext_regex, ''); 

        //Make sure filename is benign 
        var fname_regex = /^([A-Za-z0-9])+([-_])*([A-Za-z0-9-_]*)$/; 
        if(fname_regex.test(fname)) { 
         var id = fname + '-' + (new Date()).getTime(); //'blobid' + (new Date()).getTime(); 
         var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
         var blobInfo = blobCache.create(id, file, reader.result); 
         blobCache.add(blobInfo); 

         // call the callback and populate the Title field with the file name 
         callback(blobInfo.blobUri(), { title: file.name }); 
        } 
        else { 
         alert('Invalid file name'); 
        } 
       }; 
       //To get get rid of file picker input 
       this.parentNode.removeChild(this); 
      }; 

      input.click(); 
     }") 
    ] 
]);?>