Add a Local File Picker to Image Dialog in TinyMCE

TinyMCE is web-based WYSIWYG editor that converts HTML elements to an editor. It provides an instant ability to add HTML editor to textarea in the web page. You can easily add TinyMCE editor to HTML element by writing minimal JavaScript Code.

In our earlier tutorial, we have shown how you can add an editor to textarea using TinyMCE jQuery plugin. TinyMCE has many advanced features which make your WYSIWYG editor more powerful and user-friendly. Along with the text content, the image is the most useful element to insert in the editor. In this tutorial, we will show you how to add a local file picker to insert image in TinyMCE editor.

In the example code, we will integrate image uploading functionality in TinyMCE editor. This will add local file picker to the Image dialog and allow the user to upload image in TinyMCE editor.

HTML Code

Specify an HTML element (textarea) to add a WYSIWYG HTML Editor.

<textarea name="editor" id="editor"></textarea>

TinyMCE jQuery Plugin

At first download the TinyMCE jQuery plugin from here and include the TinyMCE JS library in the web page.

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>

Note that: All the necessary TinyMCE libraries are included in our source code. So, you don’t need to download the TinyMCE jQuery plugin separately.

JavaScript Code:
The following JavaScript code will replace textarea with TinyMCE editor instance by passing the selector #editor.

• An image tool will be provided to insert and edit the image.
• An image dialog will appear to select an image.
• A local file picker will be added to the Image dialog for upload image from computer.

<script>
tinymce.init({
  selector: '#editor',
  plugins: 'image code',
  toolbar: 'undo redo | link image | code',
  // enable title field in the Image dialog
  image_title: true, 
  // enable automatic uploads of images represented by blob or data URIs
  automatic_uploads: true,
  // add custom filepicker only to Image dialog
  file_picker_types: 'image',
  file_picker_callback: function(cb, 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.onload = function () {
        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();
  }
});
</script>

Saving TinyMCE Editor Content

To save the TinyMCE editor content, an HTML form needs to be submitted. Once the <form> is submitted, you can get the editor HTML content using $_POST variable in PHP.

$_POST['editor'];

How to Export TinyMCE Content to MS Word Document