TinyMCE 4图像工具不适用于远程存储的图像 [英] TinyMCE 4 imagetools not working for remotely stored images

问题描述

TinyMCE有一个名为 imagetools <的插件 / code>。这之前有用，但由于某种原因，现在上下文内联菜单不再出现了，我想把它拿回来。

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.

这是我的初始化参数

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.

更新：

我和许多其他人上传图片的方式是上传到服务器，然后服务器返回某种目录或URL，它会传回新上传图像的 src 属性，然后在编辑器中显示。换句话说，图像不是作为BLOB或Base64存储在实际编辑器中，而是作为外部资源的链接。

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.

更多阅读官方TinyMCE论坛，此主题上的一篇文章说明如下：

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

除非配置了CORS或代理，否则imagetools内联工具栏将仅显示本地服务器图像。

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

鉴于我的实现中的图像没有作为Base64本地存储在编辑器中，它可能解释了为什么没有出现高级工具栏 - 它无法远程编辑存储的图像，除了CSS可以添加到图像后可以添加到图像中....我认为它可以工作，但似乎并非如此。

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.

此时我对如何获得CORS或代理配置更感兴趣ured为了使这种高级编辑成为可能。这问题与我的有点相关。

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.

更新2

我的应用程序是一个HTTPS webapp，但我在编辑器中通过HTTP加载外部图像，这在控制台中发出警告。删除该图像后，只有HTTPS图像，高级菜单再次出现！现在的问题是，由于它是一个外部图像，在编辑器中对图像进行编辑会导致它被存储为blob，所以很明显我需要调用一些可以将图像重新上传到服务器的函数。有没有人这样做过？

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:

• http://www.tinymce.com/wiki.php/Handling_Asynchronous_Image_Uploads


• http：//www.tinymce .com / wiki.php /配置：images_upload_url


• http://www.tinymce.com/wiki.php/PHP_Upload_Handler


• http://www.tinymce.com/wiki.php/Configuration:images_upload_handler


• http://www.tinymce.com/wiki.php/Configu配给：images_upload_base_path


• http://www.tinymce.com/forum/viewtopic.php?pid=116633

• http://www.tinymce.com/wiki.php/Handling_Asynchronous_Image_Uploads
• http://www.tinymce.com/wiki.php/Configuration:images_upload_url
• http://www.tinymce.com/wiki.php/PHP_Upload_Handler
• http://www.tinymce.com/wiki.php/Configuration:images_upload_handler
• http://www.tinymce.com/wiki.php/Configuration:images_upload_base_path
• http://www.tinymce.com/forum/viewtopic.php?pid=116633

推荐答案

要回答我最初提出的问题，就是：

To answer the question I initially asked, it is this:

我的应用程序是一个HTTPS webapp，但我在编辑器中加载了一个外部图像通过HTTP在控制台中发出警告。删除该图像后，只有HTTPS图像，高级菜单再次出现！这一点很重要，尤其是对于那些可能想知道为什么他们无法编辑他们从其他网页粘贴的图片的用户。

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.

这篇关于TinyMCE 4图像工具不适用于远程存储的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！