跳过 tinymce 图像上传模式答案

【问题标题】：Skipping tinymce image-upload modal跳过 tinymce 图像上传模式
【发布时间】：2015-02-25 03:18:20
【问题描述】：

我正在使用 tinymce-rails gem 和 tinymce-rails-imageupload gem 在编辑器中上传图片。我环顾四周，找不到更改默认上传过程的方法。我不想单击工具栏中的图像按钮并获得模式弹出窗口来上传图像并添加标题，而是希望工具栏中的图像按钮充当“选择文件”按钮并直接打开文件查找器。 tinymce 可以做到这一点吗？

【问题讨论】：

标签： ruby-on-rails tinymce tinymce-4

【解决方案1】：

更新： 又快又脏的猴子补丁here

在按钮按下和系统文件选择对话框之间没有额外的窗口，并且在选择文件后立即插入图像。在我的 chrome 40.0.2214.111 中，Ubuntu 14.04（64 位）似乎可以按预期工作。

git clone https://github.com/PerfectlyNormal/tinymce-rails-imageupload.git
cd tinymce-rails-imageupload

# substitute app/assets/javascripts/tinymce/plugins/uploadimage/plugin.js with a patched version

gem build tinymce-rails-imageupload.gemspec
gem install ./tinymce-rails-imageupload-4.0.16.beta.gem

下面是修改和主分支 github 版本之间的差异（2015 年 2 月 25 日星期三 10:34:49 +0100）

diff plugin-modified.js tinymce-rails-imageupload/app/assets/javascripts/tinymce/plugins/uploadimage/plugin.js 

12,17d11
<       function Dialog() {
<         if (document.getElementsByName("file")[0].value) {
<           insertImage();
<         } else ed.windowManager.close;
<       }
< 
19,20d12
<             if(win) {win.close()};
< 
26,27c18,19
<             {type: 'iframe',  url: 'javascript:void(0)', style: 'display: none'},
<             {type: 'textbox', name: 'file', label: ed.translate('Choose an image'), subtype: 'file', onchange: Dialog},
---
>             {type: 'iframe',  url: 'javascript:void(0)'},
>             {type: 'textbox', name: 'file', label: ed.translate('Choose an image'), subtype: 'file'},
103,112d94
<         win.hide();
<        
< 
<         var clickEvent = new MouseEvent("click", {
<                                         "view": window,
<                                         "bubbles": true,
<                                         "cancelable": false});
<         clickEvent.toElement=document.getElementsByName("file")[0];
<         document.getElementsByName("file")[0].dispatchEvent(clickEvent);
<

那里没有特殊的旋钮，只需要重写this function...

我认为您需要将其 iframe 保留为后端在上传时期望的字段，但您可以使其不可见，只需在 showDialog 中打开文件选择对话框并在选择文件后调用 insertImage。

【讨论】：

嘿 Evgeny，感谢您的回答，但是您在离开 iframe 的部分让我失望了。
哦，有我实验的结果，其实你可以直接调用insertImage来改变文本框。第 26 行的“style:”也不是必需的。但它现在可以正常工作，这只是一个想法，对于制作，我建议删除所有不必要的元素，只留下一个紧凑的隐藏形式。并将替代文本设置为某些内容和大小。
很抱歉我的经验不足，但我在哪里实际放置新功能。我要创建一个 plugin.js 文件、一个“initializers/.rb”文件还是其他什么？
我的第一个代码片段是 unix shell 命令 - 它会下载 imageupload gem 源代码，你修改 plugin.js 并构建安装这个新的 gem 来代替原来的
非常好！感谢您的帮助:)