javascript - 从 TinyMCE 的对话框中获取输入字段值

Question

全部。

我很难弄明白，这是我第二次需要用 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" />

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

Answer 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);
});