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

Answer 2

您已经打开了一个窗口，因此您当前在IFrame中有imageurl.html确定..

你需要做的是

父页面上的

创建一个全局类型的变量，如

var image_url = "";

现在在imageurl页面上创建一个像这样的身体部分的脚本

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

确保imgurl上有jquery。或者使用addeventlistener或attachevent 方法

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

Answer 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（）方法，但为了保持公平，我会接受来自我觉得在试图帮助我时更积极的人。

谢谢大家。

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

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

4 个答案: