I am using TinyMCE . On a Click I am opening an inline popup successfully.But I have no idea how I can pass a value from popup to tinyMCE.Any help highly appreciated.
tinyMCE.activeEditor.windowManager.open({
file : "options.jsp",
title : 'Image Manager',
width : 800,
height : 600,
resizable : "yes",
inline : "yes",
close_previous : "no",
win : window
});
Took me some time to find it out myself. It is not that difficult. To insert HTML to your editor from the popup you may use something like
var my_html_code = 'New phrase!';
tinyMCEPopup.execCommand('mceInsertContent', false, my_html_code);
Using tinyMCEPopup.editor you may address the editor from where you opened the popup.
You could for example set a variable in the editor using
tinyMCEPopup.editor.new_variable = 'blah blah';
Related
I am trying to open fancybox programmatically. Not through link. Once user click addform and i create form manually and show the form in fancybox. sout variable contains the form html.
$.fancybox({
openEffect : "none",
closeEffect : "none",
autoDimensions : false,
width : 620,
height : "auto",
content : sOut
});
Then call this
$.fancybox.close();
My problem now is when i clcked same button the fancybox not showing up again. if you have done this let me know. How to close properly fancybox so i can reopen.
Probably, you must remove the below command in fancybox code:
'hideOnContentClick': true
I am using FancyBox and I am having a slight problem.
I have a box, that is 930px wide where users can interact with things inside the popup.
The problem is, when a user in using a screen resolution that is, lets say 800x600, some of the items in the box do not display. The box has a fixed height and width (930x400).
I have tried to use scrolling: auto and scrolling: yes but nothing seems to work
Is there a way around this?
Thanks
UPDATE: - Included code snippet
$.fancybox({
"padding" : 3,
"type":"iframe",
"href":"/requirements/"+$(".sf_admin_form_field_id div.content").html()+"/edit?req_id="+$(this).children(".id").children("div").children("input").val(),
"width" : 934,
"height" : 391,
"overlayShow": true,
"overlayOpacity" : 0,
"scrolling" : "yes",
"onClosed" : function(){ window.location.reload();
}
Try
scrolling: 'auto' (note the quotes!)
and if this does not work can you include the fancybox initializer that you are using??
I have a simple TinyMCE editor setup on my website. I also have a simple image gallery whit a link under each image. I already figured out how to open the Advanced Image Dialog when the link is pressed, but I'd like to pass the url of the image to it as the image's source. I know it's possible and I've seen a lot of links on the TinyMCE forums but they all point to the Wiki and for some reason are broken. I always end up here: http://tinymce.moxiecode.com/wiki.php.
This is how I configured TinyMCE:
tinyMCE.init({
theme : "advanced",
skin : "cirkuit",
mode : "textareas",
language : 'sl',
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "newdocument,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,search,replace",
theme_advanced_buttons3 : "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,cleanup,code,|,forecolor,backcolor",
theme_advanced_buttons4 : "image,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,|,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]",
width : 520,
height: 500
});
and I use this to open the dialog:
tinyMCE.activeEditor.execCommand('mceAdvImage');
I know this is a stupid question but please help me.
You could store custom variables under the editor instance. You can access this variable from everywhere if you know your editor instance. Example:
tinyMCE.activeEditor.my_var = "abc";
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.
When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.
How can I achieve that?
EDITED:- (As it is not working in IE8)
tinyMCE.init({
force_p_newlines : false,
force_br_newlines : false,
forced_root_block : false,
convert_newlines_to_brs: false,
// Not to add br elements.
remove_linebreaks : true,
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
This code is used to disable:
function tinymce_state(id, disable){
var state = (disable==true)? 'Off' : 'On'
tinymce.get(id).getDoc().designMode = state;
tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
tinymce.get(id).controlManager.get('bold').setDisabled(disable);
tinymce.get(id).controlManager.get('italic').setDisabled(disable);
tinymce.get(id).controlManager.get('underline').setDisabled(disable);
tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}
You may use the following to block input in the editor:
// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off
// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);
// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);
EDIT:
You could change the contenteditable property of your rtes iframe body.
Downside will be that you will have to disable the tinymce UI (buttons) seperatly
// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx)
the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
for (editor_id in tinyMCE.editors) {
if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
To disable the editor use:
tinymce.activeEditor.mode.set('readonly');
To enable the editor use:
tinymce.activeEditor.mode.set('design');
Tested on version 5.x
You can cover with a white div opacity .7 and higher z-index.
You can use in 3.x the option
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
In 4.x you can use the option
selector:'textarea.not(.no_mce)'
Hope that helps.
(Oviously you can change the CSS Class to whatever you want)
For old 3 ver you can use:
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");
I'm trying to add a custom tag to content selected in the editor, but <title> content </title> does not work. This works though: [title] content [/title]
Googling leads me to believe that I need to use these lines as well, but it does not help:
extended_valid_elements : "title",
custom_elements: "title",
Example:
For some reason this code does not work:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("<title>" + ed.selection.getContent() + '</title>');
}
But this works:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[title]" + ed.selection.getContent() + '[/title]');
}
This is the way to go
extended_valid_elements : "title",
custom_elements: "title",
You do not see anything because title is not defined elsewhere than in the head.
You will find your title-tag using firebug and it will hold what you expect to hold (ed.selection.getContent() wrapped into a title-tag.):