我正在使用DosAmigos Yii2 Tinymcs小部件在文本区域上启动tinymce。由于我使用的是小部件，因此初始化设置在PHP中（请参见下文）。我的问题是，“ file_picker_callback”需要JavaScript函数而不是字符串才能工作。例如，带引号的'file_picker_callback'=>“ function（callback，value，meta）{...}”在浏览器控制台中给我一个“ Uncaught TypeError：fileBrowserCallback.call is not 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();
}"
]
]);?>
对于那些希望看到有效答案的人，我在下面发布了一个答案。 @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();
}")
]
]);?>
您可以使用内置提供的This Alternative https://github.com/froala/yii2-froala-editor。