How we give option to upload image in tinymce insert image option?

[kamalsamra]

Can anyone provide sample code for this

[coderius]

Yes. I show my own config form field in my app.

<?= $form->field($model, 'text')->widget(TinyMce::className(), [
 'options' => ['rows' => 12],
 'language' => 'ru',
    
 'clientOptions' => [
//        'selector'=> "textarea",  // change this value according to your HTML
//        'plugins'=> "codesample",
//        'toolbar'=> "codesample",
     
//        'theme' => "advanced",
     
     //set br for enter
     'force_br_newlines' => true,
     'force_p_newlines' => false,
     'forced_root_block' => '',
     
     
     'file_picker_callback' => new JsExpression("function(cb, value, meta) {
 var input = document.createElement('input');
 input.setAttribute('type', 'file');
 input.setAttribute('accept', 'image/*');
 
 // Note: In modern browsers input[type=\"file\"] is functional without 
 // even adding it to the DOM, but that might not be the case in some older
 // or quirky browsers like IE, so you might want to add it to the DOM
 // just in case, and visually hide it. And do not forget do remove it
 // once you do not need it anymore.

 input.onchange = function() {
   var file = this.files[0];
   
   var reader = new FileReader();
   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.
     var id = 'blobid' + (new Date()).getTime();
     var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
     var base64 = reader.result.split(',')[1];
     var blobInfo = blobCache.create(id, file, base64);
     blobCache.add(blobInfo);

     // call the callback and populate the Title field with the file name
     cb(blobInfo.blobUri(), { title: file.name });
   };
   reader.readAsDataURL(file);
 };
 
 input.click();
}"),
     'plugins' => [
         "advlist autolink lists link charmap print preview anchor",
         "searchreplace visualblocks code fullscreen",
         "insertdatetime media table contextmenu paste image imagetools"
     ],
     
     'menubar'=> ["insert"],
     'automatic_uploads' => true,
     'file_picker_types'=> 'image',
     
     'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image imageupload | fontselect | cut copy paste"
 ]
]); ?>

[karunakaranselvam]

this is not work for me

[tonydspaniard]

Thanks @coderius for taking the time to answer the question. The users with browsers that do not support FileReader could also work with plugins instead, like https://www.tiny.cloud/docs/plugins/image/

[ThreepE0]

under client options, if you specify "'paste_data_images' => true," you can copy/paste images right in the editor

[haifahrul]

Yes. I show my own config form field in my app.

<?= $form->field($model, 'text')->widget(TinyMce::className(), [
 'options' => ['rows' => 12],
 'language' => 'ru',
    
 'clientOptions' => [
//        'selector'=> "textarea",  // change this value according to your HTML
//        'plugins'=> "codesample",
//        'toolbar'=> "codesample",
     
//        'theme' => "advanced",
     
     //set br for enter
     'force_br_newlines' => true,
     'force_p_newlines' => false,
     'forced_root_block' => '',
     
     
     'file_picker_callback' => new JsExpression("function(cb, value, meta) {
 var input = document.createElement('input');
 input.setAttribute('type', 'file');
 input.setAttribute('accept', 'image/*');
 
 // Note: In modern browsers input[type=\"file\"] is functional without 
 // even adding it to the DOM, but that might not be the case in some older
 // or quirky browsers like IE, so you might want to add it to the DOM
 // just in case, and visually hide it. And do not forget do remove it
 // once you do not need it anymore.

 input.onchange = function() {
   var file = this.files[0];
   
   var reader = new FileReader();
   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.
     var id = 'blobid' + (new Date()).getTime();
     var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
     var base64 = reader.result.split(',')[1];
     var blobInfo = blobCache.create(id, file, base64);
     blobCache.add(blobInfo);

     // call the callback and populate the Title field with the file name
     cb(blobInfo.blobUri(), { title: file.name });
   };
   reader.readAsDataURL(file);
 };
 
 input.click();
}"),
     'plugins' => [
         "advlist autolink lists link charmap print preview anchor",
         "searchreplace visualblocks code fullscreen",
         "insertdatetime media table contextmenu paste image imagetools"
     ],
     
     'menubar'=> ["insert"],
     'automatic_uploads' => true,
     'file_picker_types'=> 'image',
     
     'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image imageupload | fontselect | cut copy paste"
 ]
]); ?>

It's work for me :+1: :smile: