Clever Geek Handbook

TinyMCE 4 imagetools not working for remote image storage

TinyMCE has a plugin called imagetools

. This worked before, but for some reason now the contextual inline menu will no longer appear and I would like to bring 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 removing these settings and using the defaults on the official fully functional demo page, STILL does not work.

UPDATE:

Like me and many other people upload images to upload to the server and then the server returns some kind of directory or url, which is passed back to the attribute of the src

newly uploaded image, which is then displayed in the editor. In other words, images are not saved in the real editor as BLOB or Base64, but rather as a link to an external resource.

After more details on the official TinyMCE forum, one post to this thread says the following:

The built-in imagetools toolbar will only show for local server images unless CORS or proxy is configured.

Considering that the images in my implementation are not stored locally in the editor as Base64, this would probably explain why the extended toolbar is not showing - it cannot edit changes in the remote saved image, other than what is possible with CSS which can add to image after it has been loaded ... As I assumed it would work, but it looks like it doesn't.

At this point I'm more interested in how to get this "CORS or proxy" to make this advanced editing possible. This question is somewhat related to mine.

UPDATE 2

My app is an HTTPS webapp, but I was loading an external image in the editor over HTTP which was throwing a warning in the console. As soon as I removed this image and only had HTTPS images, the advanced menu appeared! Now the problem is that since this is an external image, editing the image in the editor will save it as a blob, so I must clearly name some function that can re-upload the image to the server. Has anyone done this?

Here are some resources you can use successfully:

+1


source to share


1 answer


To answer the question I originally asked this:

My app is an HTTPS webapp, but I was loading an external image in the editor over HTTP which was throwing a warning in the console. As soon as I removed this image and only had HTTPS images, the advanced menu appeared! This is important for recognition ... Especially for users who may be wondering why they cannot edit images that they have inserted there from other web pages.



In general I figured it out, but I'm not sure what the real solution is.

0


source






More articles:


All Articles