How can I upload Image using TinyMCE?

Question

I checked tinyMCE documentation but can't get fully working script to upload image in text editor by drag and drop OR upload/Browse button.

What I am using now is bellow :

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script>
tinymce.init({
  selector: "textarea",
  relative_urls : true,
  remove_script_host : false,
  convert_urls : true,
  default_link_target:"_blank",
  images_upload_base_path: '../images/tinymce',
  automatic_uploads: true,
  file_browser_callback_types: 'file image media',
  images_upload_url: 'postAcceptor.php',

  plugins: [
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern"
  ],

  toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
  toolbar2: "image | media | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | insertdatetime preview | forecolor backcolor",
  toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
//image, media from toolbar2
  menubar: false,
  toolbar_items_size: 'small',
  height: 300,
  style_formats: [{
    title: 'Bold text',
    inline: 'b'
  }, {
    title: 'Red text',
    inline: 'span',
    styles: {
      color: '#ff0000'
    }
  }, {
    title: 'Red header',
    block: 'h1',
    styles: {
      color: '#ff0000'
    }
  }, {
    title: 'Example 1',
    inline: 'span',
    classes: 'example1'
  }, {
    title: 'Example 2',
    inline: 'span',
    classes: 'example2'
  }, {
    title: 'Table styles'
  }, {
    title: 'Table row 1',
    selector: 'tr',
    classes: 'tablerow1'
  }],

  templates: [{
    title: 'Test template 1',
    content: 'Test 1'
  }, {
    title: 'Test template 2',
    content: 'Test 2'
  }],
  content_css: [
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
    '//www.tinymce.com/css/codepen.min.css',
    "dist/css/AdminLTE.min.css",
  ]
});
</script>

can you tell me how can I enable or upload image using tinymce ?

Answer 1

The easiest way (Easier than the postAcceptor.php) Inside tinymce.init After adding image to plugins and toolbar Add :

image_advtab: true,
file_picker_callback: function(callback, value, meta) {
  if (meta.filetype == 'image') {
    $('#upload').trigger('click');
    $('#upload').on('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        callback(e.target.result, {
          alt: ''
        });
      };
      reader.readAsDataURL(file);
    });
  }
},

and add

<input name="image" type="file" id="upload" class="hidden" onchange="">

after the textarea tag of tinymce

Answer 2

您需要在服务器上安装PHP，并在其中需要“ postAcceptor.php”来处理图像上传。

Answer 3

I would start by looking in the browser's console to see if there are any errors tied to the attempt to call your PHP file - if the PHP file is not being called the image certainly won't be saved.

Assuming the PHP file is actually being called, I would start adding debugging to that PHP file to...

• make sure its being called
• make sure the $_POST variable contains the image
• figure out what its actually doing with the posted image.

Some background on the TinyMCE image upload process...

The basic process is that TinyMCE will create a separate HTTP POST for each image that you modify with the image editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.

The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:

• Store the item in a folder on your web server
• Store the item in a database
• Store the item in an asset management system

...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:

{ location : '/uploaded/image/path/image.png' }

TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location. The TinyMCE page has more details on all of this:

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.