Yii2 Tinymce 위젯 파일/이미지 업로드 문제

Question

DosAmigos Yii2 Tinymcs 위젯을 사용하여 텍스트 영역에 주석을 시작합니다. 위젯을 사용하고 있기 때문에 시작 설정은 PHP로합니다 (아래 참조). 내 문제는 'file_picker_callback'자바 스크립트 함수가 작동하지 문자열이 필요합니다. 예를 들어 따옴표로 'file_picker_callback'=> "function (callback, value, meta) {...}"브라우저 콘솔에서 "Uncaught TypeError : fileBrowserCallback.call이 함수가 아닙니다"오류가 발생합니다. 그러나 따옴표가 없으면 'file_picker_callback'=> function (콜백, 값, 메타) {...}이 구문 오류가있어 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(); 
     }") 
    ] 
]);?>