Yii2 Tinymce 小部件 File/Image 上传问题

Question

我正在使用 DosAmigos Yii2 Tinymcs Widget 在文本区域启动 tinymce。由于我使用的是小部件，因此启动设置在 PHP 中（见下文）。我的问题是 'file_picker_callback' 需要 javascript 函数而不是字符串才能工作。例如，带有引号的 'file_picker_callback'=>"function(callback, value, meta){...}" 在浏览器控制台中给我一个 "Uncaught TypeError: fileBrowserCallback.call is not a function" 错误。但是，如果没有引号，'file_picker_callback'=>function(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();
        }")
    ]
]);?>

Yii2 Tinymce 小部件 File/Image 上传问题

Yii2 Tinymce Widget File/Image Upload Issue

javascript

php

tinymce

widget

yii2