Obtenir la valeur du champ d'entrée de la boîte de dialogue dans TinyMCE

tous les.

j'ai du mal à comprendre, c'est la deuxième fois que je dois faire quelque chose avec tinyMCE, mais cette fois je ne trouve pas la réponse.

voici ce que je veux faire: j'ai ajouté un bouton sur mon éditeur qui ouvre un nouveau popup avec un champ d'entrée de texte simple et un bouton. Je veux cliquer sur le bouton et saisir la valeur que j'ai définie dans mon champ d'entrée, puis utiliser cette valeur pour modifier ce que j'ai dans mon éditeur.

Voici ce que j'ai jusqu'à présent uniquement code pertinent:

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

C'est ce qu'imageurl.le html:

<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />

donc, ce que je dois faire, c'est d'obtenir n'importe quelle entrée de texte "image-url" à chaque fois que je clique sur le bouton OK, et utiliser ce texte à l'intérieur de mon éditeur. Je sais que je peux utiliser ed.sélection.setContent (fieldValue ) et il remplacera mon texte sélectionné par la valeur image-url, Je ne sais tout simplement pas comment obtenir la valeur image-url.

l'information la plus détaillée que j'ai pu trouver était http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser mais je ne peux pas le faire fonctionner pour mes besoins. Quelqu'un qui peut m'aider avec ça? Je suis sûr que ça devrait être simple pour quelqu'un avec plus d'expérience.

Merci à tous pour votre attention.

mise à Jour de 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>
10
demandé sur andrux 2013-04-23 00:34:45

4 réponses

Ok, ça ne devrait pas être si difficile.

dans un script-étiquette sur fond de votre imageurl.html ou utilisez une fonction javascript prête à l'emploi. Ce qui suit va ajouter un handler onclick à votre bouton qui va obtenir l'image_url et l'écrire dans la sélection 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);
});
9
répondu Thariama 2013-05-02 08:44:04

vous avez ouvert une fenêtre donc vous êtes actuellement dans IFrame avec imageurl.html ok..

ce que vous avez à faire est de

sur une page parent créer une variable de type global comme

var image_url = "";

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

assurez-vous que vous avez jquery sur imgurl. ou utiliser autrement addeventlistener ou attachevent méthode

logique est d'obtenir de la fenêtre parent de l'élément de l'iframe et l'enregistrer à partir d'une iframe.

3
répondu Vishal Sharma 2013-04-30 08:27:02

Ok, j'ai trouvé le problème. J'ai dû inclure tiny_mce_popup.js dans imageurl.html, c'est pour ça que tinyMCEPopup.close () n'a pas fonctionné:

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

j'ai supposé à tort qu'il était chargé parce que j'ai pu voir le popup.

à l'Origine, je ne voulais pas modifier imageurl.html, mais il semble que ce est juste la façon dont il doit être fait...

quoi qu'il en soit, je savais déjà comment je pouvais aborder certaines de ces tâches à l'intérieur d'imageurl.fichier html, et je l'avais déjà vu tinyMCEPopup avait une méthode close (), mais pour être juste, j'accepterai la réponse de la personne qui était plus active à essayer de m'aider.

Merci à tous.

2
répondu andrux 2013-05-01 15:48:50

code Final sera comme ceci.travailler. ..

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>
0
répondu user2799360 2014-11-17 17:18:16