从TinyMCE中的对话框中获取输入字段值 [英] Get input field value from dialog box in TinyMCE

问题描述

所有。

我很难搞清楚这一点，这是我第二次需要用tinyMCE做点什么但是这次我不能找到答案。

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.

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

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.

这是我所拥有的far - 仅相关代码：

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

这就是imageurl.html的含义：

This is what imageurl.html has:

<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值。

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.

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

The most detailed info I was able to find was http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser but 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.

感谢大家的关注。

更新了imageurl.html **

Updated 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>

推荐答案

好的，这不应该那么困难。

Ok, this shouldn't be that difficult.

在imageurl.html底部的脚本标签中发出此信息，或使用文档就绪的javascript函数。下面将为你的按钮添加一个onclick处理程序，它将获得image_url并将其写入tinymces选项。

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.

$('#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);
});

这篇关于从TinyMCE中的对话框中获取输入字段值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！