Получить значение поля ввода из диалогового окна в TinyMCE

все.

Мне сложно понять это, это второй раз, когда мне нужно что-то сделать с 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), и он заменит мой выделенный текст значением 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>

Ответ 1

Хорошо, это не должно быть так сложно.

введите это в script -tag внизу вашего 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);
});

Ответ 2

Вы открыли окно, в котором вы сейчас находитесь в IFrame, имеющем imageurl.html ok..

что вам нужно сделать, это

на родительской странице создайте одну переменную глобального типа, например

var image_url = "";

теперь на странице imageurl создайте script на части тела, подобной этой

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

убедитесь, что у вас есть jquery на imgurl. или иным образом использовать addeventlistener или attachevent Метод

логика - это получить родительский элемент окна из iframe и сохранить его из iframe.

Ответ 3

Хорошо, я нашел проблему. Я должен был включить tiny_mce_popup.js внутри imageurl.html, поэтому крошечныйMCEPopup.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(), но чтобы он был справедливым, я согласен с ответом от человек, которого я чувствовал, был более активным в попытке помочь мне.

Спасибо всем.

Ответ 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>