12

全部。

我很难弄清楚这一点，这是我第二次需要用 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>
4

4 回答 4

10

好吧，这应该不难。

在 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);
});
于 2013-04-25T07:25:07.247 回答
3

您已经打开了一个窗口，因此您当前位于具有 imageurl.html 的 IFrame 中。

你要做的是

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

var image_url = "";

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

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

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

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

于 2013-04-30T08:27:02.687 回答
2

好的，我发现了问题。我必须在 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() 方法，但为了公平起见，我会接受我的人的回答感觉更积极地试图帮助我。

感谢大家。

于 2013-05-01T15:48:50.823 回答
0

最终的代码会喜欢 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>
于 2014-11-17T17:18:16.940 回答