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: