CKEditor Images Upload using Yii2 – TinyMCE

CKEditor Images Upload using Yii2 – TinyMCE

In this Post We Will Explain About is CKEditor Images Upload using Yii2 – TinyMCE With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to CKEditor file upload in Yii2 Example

In this post we will show you Best way to implement Yii2, CKEditor and Images Upload, hear for Image Uploader and Browser for CKEditor in Yii2 with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

CKEditor structure

The structure will be

Tinymce
–js
–tinymce
— external libs
— tinymce.min.js

Include External Libs

Call simple external libs CKEditor tinymce.min.js file to your yii project file.

index.html

  
  



    

      
      
 Pakainfo.com - YII2 Tinymce with ImageUpload 
    
    
      

index.js

Init simple tinymce yii to textarea

tinymce.init({
    selector: "textarea",
    theme: "modern",
    paste_data_images: true,
	    plugins: [
      "pagebreak autolink image charmap lists link print preview hr anchor advlist",
      "searchreplace visualblocks wordcount visualchars code fullscreen",
      "table insertdatetime media directionality nonbreaking save contextmenu",
      "textcolor colorpicker emoticons template textpattern paste"
    ],
    toolbar1: "bold italic | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | insertfile undo redo ",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    file_picker_callback: function(callback, value, datameta) {
      if (datameta.filetype == 'image') {
        $('#liveFileupload').trigger('click');
        $('#liveFileupload').on('change', function() {
          var file = this.files[0];
          var dataread = new FileReader();
          dataread.onload = function(e) {
            callback(e.target.result, {
              alt: ''
            });
          };
          dataread.readAsDataURL(file);
        });
      }
    },
    templates: [{
      title: 'Pakainfo.com Website 1',
      content: 'Live24u 1'
    }, {
      title: 'Pakainfo.com Website 2',
      content: 'Live24u 2'
    }]
  });

For yii 2 :

Place this Free file browser for CKEditor and TinyMCE folder in vendor folder and render js from vendor folder Like below script

Thats it Last We can access this source code for YII2 also.

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Example

I hope you have Got What is Image Uploader and Browser for CKEditor in Yii2 And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.