all.
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.
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'
}, {});
});
}
This is what imageurl.html has:
<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />
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.
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.
Thank you all for your attention.
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.
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);
});
You have opened up a window so you are currently in IFrame having imageurl.html ok..
what you have to do is
on a parent page create one variable of global type like
var image_url = "";
now on imageurl page create a script on body part like this
<body>
<script>
$("#button").click(function(){
window.parent.image_url = $('image-url').val();
});
</script>
</body>
make sure you have jquery on imgurl. or otherwise use addeventlistener or attachevent
method
logic is get parent window's element from the iframe and save it from iframe.
Ok, I found the problem. I had to include tiny_mce_popup.js inside imageurl.html, that's why the tinyMCEPopup.close() didn't work:
<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>
I wrongly assumed it was being loaded because I was able to see the popup.
Originally I didn't want to modify imageurl.html, but it looks like that's just the way it has to be done...
Anyway, I already knew how I could address some of these tasks from inside imageurl.html file, and I had already seen tinyMCEPopup had a close() method, but to keep it fair, I'll accept the answer from the person who I felt was more active in trying to help me out.
Thanks everyone.
Final code will like 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>
