从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" />

所以,我需要做的是每当我点击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>

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