从 TinyMCE 的对话框中获取输入字段值答案

【问题标题】：Get input field value from dialog box in TinyMCE从 TinyMCE 的对话框中获取输入字段值
【发布时间】：2013-04-22 20:34:45
【问题描述】：

全部。

我很难弄清楚这一点，这是我第二次需要使用 tinyMCE 做某事，但这次我找不到答案。

这就是我想要做的：我在我的编辑器上添加了一个按钮，它会打开一个带有单个文本输入字段和一个按钮的新弹出窗口。我想单击按钮并获取我在输入字段中设置的值，然后使用该值来修改我在编辑器中的内容。

这是我目前所拥有的——只有相关的代码：

    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'
            }, {});
        });
    }

这就是 imageurl.html 所拥有的：

<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />

所以，我需要做的是在我单击“确定”按钮时获取任何“image-url”文本输入，并在我的编辑器中使用该文本。我知道我可以使用 ed.selection.setContent( fieldValue )，它会将我选择的文本替换为 image-url 值，我只是不知道如何获取 image-url 值。

我能找到的最详细的信息是http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser，但我无法让它满足我的需要。谁能帮我解决这个问题？我相信对于在这方面有更多经验的人来说应该很简单。

感谢大家的关注。

更新了 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>

【问题讨论】：

图片网址是什么？它来自哪里？
image-url 是一个文本字段，我将在其中粘贴图像 url，然后当我单击 OK 时，我希望能够在我的编辑器中使用该 url

标签： javascript tinymce

【解决方案1】：

好的，这应该没那么难。

在您的 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);
});

【讨论】：

是否可以不将脚本放在 imageurl.html 中？我不想让这变得比必要的更复杂，但修改 imageurl.html 是我试图避免的事情
好的，虽然我不想修改 imageurl.html 文件，但我得到了它，但如果这是它需要完成的方式，那就这样吧......现在，我只是需要关闭弹出对话框，然后你就可以获得50个代表点，那么，我该怎么做呢？
关闭弹出对话框很简单。但它应该从弹出代码中完成。我假设您正在使用 tinymce 弹出窗口。在弹出窗口中使用它来关闭弹出窗口：tinyMCEPopup.close();
请在我编辑的问题中查看我在 imageurl.html 文件中的内容。我应该能够从 imageurl.html 中关闭弹出窗口，对吗？

【解决方案2】：

你已经打开了一个窗口，所以你目前在 IFrame 中，imageurl.html ok..

你要做的是

在父页面上创建一个全局类型的变量，如

var image_url = "";

现在在 imageurl 页面上像这样在正文部分创建一个脚本

<body>
<script>
$("#button").click(function(){
window.parent.image_url = $('image-url').val();
});
</script>
</body>

确保您在 imgurl 上有 jquery。或以其他方式使用 addeventlistener 或 attachevent 方法

逻辑是从 iframe 中获取父窗口的元素并从 iframe 中保存。

【讨论】：

【解决方案3】：

好的，我发现了问题。我必须在 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>

我错误地认为它正在加载，因为我能够看到弹出窗口。

本来我并不想修改imageurl.html，但看来只能这样了……

无论如何，我已经知道如何从 imageurl.html 文件中解决其中一些任务，并且我已经看到 tinyMCEPopup 有一个 close() 方法，但为了公平起见，我会接受来自我觉得更积极地试图帮助我的人。

谢谢大家。

【讨论】：

+1 感谢与其他用户分享您的知识（这可能会节省一些时间）
不客气...我以前从未奖励过赏金，不确定我是否做得对或是否还有其他需要做的事情

【解决方案4】：

最终的代码会像this.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>

【讨论】：