Question

我正在使用DosAmigos Yii2 Tinymcs Widget来启动文本区域的tinymce。由于我使用的是小部件，因此启动设置在PHP中（参见下文）。我的问题是'file_picker_callback'需要一个javascript函数而不是一个字符串才能工作。例如，使用引号，'file_picker_callback'=＆gt;“function（callback，value，meta）{...}”在浏览器控制台中给出了“未捕获的TypeError：fileBrowserCallback.call不是函数”错误。但是没有引号，'file_picker_callback'=＆gt;函数（回调，值，元）{...}在语法上不正确，因此它会生成语法错误。我怎样才能在PHP中进行这部分初始化？如果我不能用PHP做，那么javascript / jQuery需要去哪里初始化'file_picker_callback'。我怎么把它放在那里？

dummy:
  file.touch:
    - name: /tmp/dummy/tmp.txt
    - unless: test -d /tmp/dummy/

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小部件文件/图像上传问题

1 个答案: