javascript 从 TinyMCE 的对话框中获取输入字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16156221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get input field value from dialog box in TinyMCE
提问by andrux
all.
全部。
I'm having a hard time figuring this out, it's the second time I need to do something with tinyMCE but this time I just can't find the answer.
我很难弄清楚这一点，这是我第二次需要用 tinyMCE 做点什么，但这一次我找不到答案。
Here's what I want to do: I have added a button on my editor that opens a new popup with a single text input field and a button. I want to click the button and grab the value I set in my input field, then use that value to modify what I have in my editor.
这就是我想要做的：我在我的编辑器上添加了一个按钮，它打开一个带有单个文本输入字段和一个按钮的新弹出窗口。我想单击按钮并获取我在输入字段中设置的值，然后使用该值修改我在编辑器中的内容。
Here's what I have so far - only relevant code:
这是我到目前为止所拥有的 - 只有相关的代码：
init : function( ed, url ) {
ed.addCommand( 'mceTooltip', function() {
ed.windowManager.open({
file: 'imageurl.html',
width: 480,
height: 180,
inline: 1,
title: 'Please enter an image URL'
}, {});
});
}
This is what imageurl.html has:
这是 imageurl.html 的内容：
<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />
So, what I need to do is get whatever "image-url" text input has whenever I click the OK button, and use that text inside my editor. I know I can use ed.selection.setContent( fieldValue ) and it will replace my selected text with the image-url value, I just don't know how to get the image-url value.
所以，我需要做的是在我单击“确定”按钮时获取任何“image-url”文本输入，并在我的编辑器中使用该文本。我知道我可以使用 ed.selection.setContent( fieldValue ) 并且它将用 image-url 值替换我选择的文本，我只是不知道如何获取 image-url 值。
The most detailed info I was able to find was http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browserbut I can't make it work for my needs. Anybody who can help me out with this? I'm sure it should be simple for somebody with more experience on this.
我能找到的最详细的信息是http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser但我不能让它满足我的需要。谁能帮我解决这个问题？我相信对于在这方面有更多经验的人来说应该很简单。
Thank you all for your attention.
谢谢大家的关注。
Updated imageurl.html **
更新 imageurl.html **
<script>
document.getElementById( 'submit-image-url' ).onclick = function(){
var imageUrl = document.getElementById( 'image-url' ).value;
window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, imageUrl );
window.parent.tinyMCEPopup.close(); // this line gets me this error: "Uncaught TypeError: Cannot read property 'windowManager' of undefined "
};
</script>
采纳答案by Thariama
Ok, this shouldn't be that difficult.
好吧，这应该不难。
issue this in a script-tag on bottom of your imageurl.html or use a document ready javascript function. The following will add an onclick handler to your button which will get the image_url and write this to the tinymces selection.
在你的 imageurl.html 底部的脚本标签中发出这个，或者使用一个文档就绪的 javascript 函数。下面将向您的按钮添加一个 onclick 处理程序，该处理程序将获取 image_url 并将其写入 tinymces 选择。
$('#submit-image-url').bind('click', function(){
var image_url = $('#image-url').val();
// in case you are using a real popup window
window.opener.tinymce.activeEditor.selection.setContent(image_url);
// in case you use a modal dialog
tinymce.activeEditor.selection.setContent(image_url);
});
回答by Vishal Sharma
You have opened up a window so you are currently in IFrame having imageurl.html ok..
您已经打开了一个窗口，因此您当前处于 IFrame 中，并且 imageurl.html 正常。
what you have to do is
你必须做的是
on a parent page create one variable of global type like
在父页面上创建一个全局类型的变量，如
var image_url = "";
now on imageurl page create a script on body part like this
现在在 imageurl 页面上像这样在身体部位创建一个脚本
<body>
<script>
$("#button").click(function(){
window.parent.image_url = $('image-url').val();
});
</script>
</body>
make sure you have jquery on imgurl. or otherwise use addeventlistener or attachevent method
确保你在 imgurl 上有 jquery。或以其他方式使用 addeventlistener 或 attachevent 方法
logic is get parent window's element from the iframe and save it from iframe.
逻辑是从 iframe 中获取父窗口的元素并从 iframe 中保存它。
回答by andrux
Ok, I found the problem. I had to include tiny_mce_popup.js inside imageurl.html, that's why the tinyMCEPopup.close() didn't work:
好的，我发现了问题。我必须在 imageurl.html 中包含 tiny_mce_popup.js，这就是 tinyMCEPopup.close() 不起作用的原因：
<script type="text/javascript" src="js/tinymce/tiny_mce_popup.js"></script>
<script>
document.getElementById( 'submit-image-url' ).onclick = function(){
var imageUrl = document.getElementById( 'image-url' ).value;
tinyMCEPopup.execCommand( 'mceInsertContent', 0, imageUrl );
tinyMCEPopup.close();
};
</script>
I wrongly assumed it was being loaded because I was able to see the popup.
我错误地认为它正在加载，因为我能够看到弹出窗口。
Originally I didn't want to modify imageurl.html, but it looks like that's just the way it has to be done...
原本我不想修改 imageurl.html，但看起来这只是它必须完成的方式......
Anyway, I already knew how I could address some of these tasks from inside imageurl.html file, and I had already seen tinyMCEPopup had a close() method, but to keep it fair, I'll accept the answer from the person who I felt was more active in trying to help me out.
无论如何，我已经知道如何从 imageurl.html 文件中解决其中的一些任务，并且我已经看到 tinyMCEPopup 有一个 close() 方法，但为了公平起见，我会接受我的人的回答感觉更积极地试图帮助我。
Thanks everyone.
感谢大家。
回答by user2799360
Final code will like this.working ...
最终代码会像这样.working ...
imageurl.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tiny_mce_popup.js"></script>
</head>
<body>
<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />
<script>
document.getElementById( 'submit-image-url' ).onclick = function(){
var imageUrl = document.getElementById( 'image-url' ).value;
tinyMCEPopup.execCommand( 'mceInsertContent', 0, imageUrl );
tinyMCEPopup.close();
};
</script>
</body>
</html>
