TinyMCE has a plugin called imagetools. This was working before, but for some reason now the contextual inline menu will not appear anymore and I would like to have it back.
Here are my init parameters
schema: 'html5',
inline: false,
toolbar: 'bold italic underscore image',
menubar: true,
plugins: [
"advlist autolink lists link hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking table contextmenu directionality",
"template paste textcolor colorpicker textpattern imagetools autoresize"
],
paste_data_images: false,
browser_spellcheck : true,
image_advtab: true,
toolbar1: "undo redo | styleselect | bold italic | preview | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link",
tools: "inserttable image fullscreen",
responsive: true,
paste_retain_style_properties: "all",
relative_urls: false,
remove_script_host : false,
convert_urls : true
Even after deleting these settings and using the default values from the official full featured demo page, it STILL doesn't work.
UPDATE:
The way I, and many other people, upload images is to upload to the server and then the server returns some kind of directory or URL which is passed back into the src attribute of the newly uploaded image which is then displayed in the editor. In other words, the images are not stored within the actual editor as BLOBs or Base64, but rather as a link to an external resource.
After more reading on the official TinyMCE forum, one post on this thread says the following:
The imagetools inline toolbar will only show for local server images unless CORS or proxy is configured.
Given that the images in my implementation are not locally stored within the editor as Base64, it would probably explain why the advanced tool bar is not appearing -- it can't make edits to the remotely stored image, other than what's possible with CSS that can be added to the image after it has been loaded.... Which is how I assumed it would work, but it appears not to be the case.
At this point I am more interested in how to get this "CORS or Proxy configured" in order to make this advanced editing possible. This question is somewhat related to mine.
UPDATE 2
My application is an HTTPS webapp, but I was loading an external image in the editor via HTTP which was throwing a warning in the console. Once I removed that image, and only had HTTPS images in there, the advanced menu started appearing again! Now the problem is that since it is an external image, making edits to the image in the editor will cause it to be stored as a blob, so clearly I need to call some kind of function which can re-upload the image to the server. Has anyone done this?
Here are some resources which can be used to hopefully get started:
To answer the question I initially asked, it is this:
My application is an HTTPS webapp, but I was loading an external image in the editor via HTTP which was throwing a warning in the console. Once I removed that image, and only had HTTPS images in there, the advanced menu started appearing again! This is important to recognize... Especially for users who might be wondering why they can't edit pictures that they have pasted in there from other web pages.
All in all, I figured that out, but I'm not sure what the real solution to it is.