TinyMCE file_picker_callback选择已上传图像的图像服务器目录

Question

>我已经有工作脚本，用于将新图像上传到我通过以下方式访问的服务器： 插入>图像>上传

但是，有时我需要使用我已经上传的图像，因此我正在寻找一些 file_picker_callback(( 脚本，该脚本可以让我浏览服务器上的选定目录(不是用户的 hdd(，我上传图像并让我选择我想要的那个。

我还没有找到任何可以做到这一点的脚本，所以我希望有人可以指出我免费使用的东西。

我像这样加载它：

<script>
tinymce.init({
selector: "#mytextarea",
language: "en",
plugins: "wordcount autolink link preview charmap directionality fullscreen emoticons media paste save spellchecker table searchreplace visualblocks quickbars image imagetool moxiemanager",
menubar: "file edit view insert format table tools",
image_advtab: true,
paste_data_images: true,
default_link_target: "_blank",
automatic_uploads: true,
file_picker_types: 'image',
relative_urls: false,
remove_script_host: false,
document_base_url: "http://www.somehost.com/",
images_upload_url: '../uploadChecker.php',
images_upload_credentials: true,
file_picker_callback: function(callback, value, meta) {
},
});
</script>

Answer 1

我可以通过创建一个页面来显示服务器上的所有图像文件，然后使用自定义 URL 对话框打开该页面来实现这一点。外部页面将通过浏览器的window.postMessageAPI将图像URL发送回TinyMCE。URL 对话框将使用onMessage事件侦听器来捕获图像 URL，并通过file_picker_callback中的callback()将其传递给图像对话框。

这是我file_picker_callback函数：

file_picker_callback: function (callback, value, meta) {
var fileBrowseUrl =  "images.html"; //external page
tinyMCE.activeEditor.windowManager.openUrl({
url: fileBrowseUrl,
title: 'Server File Browser',
width: 800,
height: 600,
resizable: "yes",
onMessage: function (api, data) {
callback(data.src, {alt: data.alt});
}

这是外部页面"imges.html"中的jQuery脚本，它侦听图像上的点击事件，并将图像URL和替代文本发送回URL对话框：

$('body').on('click', 'img', function (e) {
var imgSrc = $(this).prop('src');
var imgAlt = $(this).prop('alt');
//send image url back to TinyMce
window.parent.postMessage({
mceAction: 'customAction',
src: imgSrc,
alt: imgAlt
});
//close external page and return to TinyMce
window.parent.postMessage({
mceAction: 'close'
});
});

演示代码可以在这里找到：https://github.com/jeffhehe/TinyMce-file-picker-callback-demo