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";
Related
I am trying to reload data saved by tinymce. When i do so all of the html tags are then viewable inside the control.
How do you load html back into the control the same as it was previously saved(without the
tags viewable)?
Here is my initialization:
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : '/Scripts/tinymce/tiny_mce.js',
encoding: "xml",
// General options
theme : "advanced",
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 options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,undo,redo,|,image,",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,ltr,rtl,|,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
// Example content CSS (should be your site CSS)
//content_css : "/Content/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "/Scripts/tinymce/lists/template_list.js",
external_link_list_url: "/Scripts/tinymce/lists/link_list.js",
external_image_list_url: "/Scripts/tinymce/lists/image_list.js",
media_external_list_url: "/Scripts/tinymce/lists/media_list.js"
});//end tinymce
and my textarea:
<%: Html.TextArea("Blog", Model.Blog, new { #class = "tinymce", rows = "25", cols = "40" })%>
Thank you for your time.
Billy
Using MVC 2 -
The resolution to this issue for me was to store my data decoded using HttpUtility.HtmlDecode.
Then when pulling it back up and assigning to a display(string) property of my model i encoded the string using HttpUtility.HtmlEncode.
Finally on the view page i decoded that same property for display using HttpUtility.HtmlDecode once more.
Hope this helps someone else with a similar issue.
See http://www.tinymce.com/wiki.php/Configuration:encoding
Seems like you need to set encoding: 'xml' on your configuration.
i have used below code snippet to show the different features like forecolor,backcolor,bulllist etc on tinymce
$(function() {
appendTinyMCE();
function appendTinyMCE(){
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "preview",
// Theme options
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});}
});
But when i see the tinymce on browser, around 25 percent of tinymce editor header width is taken by just two buttons i.e forecolor,backcolor
which looks very odd , though i have mentioned theme_advanced_toolbar_align : "left".
here is the image.
Can we adjust the tinymce buttons so
that each button takes uniform width?
You can adjust the css of the tinymce toolbar using the tinymce init configuration paramter editor_css.
A similar problem was reported here:
http://www.tinymce.com/forum/viewtopic.php?id=78
My TinyMCE initialization code is as follows:
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "mceEditor",
width : "94%%",
height : "449px",
theme :"advanced",
plugins : "autolink,lists,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,undo,redo",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : false,
//content_css : "css/word.css",
convert_urls : false,
extended_valid_elements: 'script[src|title|type],title[dir<ltr?rtl|lang]',
});
By default TinyMCE only allows editing of the body part of a HTML page, as this is the most common use case. If you want to use it to edit a full HTML page I'd suggest using the fullpage plugin: http://www.tinymce.com/wiki.php/Plugin:fullpage
Add plugin to TinyMCE plugin option list example: plugins : "fullpage".
You had an error in your tinymce config (height and width need to get set as a value without 'px'). Check this fiddle out. The element stay there and do not get stripped out (you may verify this using the html/code button).
I'm using tinymce 3.4.9 and I have a problem.
when I insert a video from youtube, i see that the video has been insert to the textarea, but when I use
alert(tinyMCE.get('TextInp' id).getContent());
Or
alert(oTinyMCE.get('TextInp' id).getContent());
Or
alert($('#TextInp' id).html());
It's print (as alert) all the text except the youtube embed (iframe i think it should be). It's gone.
I'm Initializing the tinymce like this:
var oTinyMCE=new tinymce.Editor('TextInp' id, {
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : alignMe ,
width: MCEWidth,
height: MCEHeight,
relative_urls : false,
remove_script_host : false,
plugins : "safari,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,wordcount",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,cleanup,|,insertdate",
theme_advanced_buttons3 : "hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media",
language: myLang,
directionality : dir
});
oTinyMCE.render();
What can be the problem?
Thanks
Looks like your tag gets stripped out. You will have to modify the tinymce settings valid_elements and valid_children to your needs.
I just started using TinyMCE as a WYSIWYG editor, I'm wondering if someone sees my question have used this nice editor can help me, here is my script:
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "comment",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
skin : "o2k7",
skin_variant : "silver"
});
</script>
but I get others icons, really don't know how to remove it, such as : 'sub,'sup,'HTML editor', ..
Thanks in advance,
My regards.
You need to define the buttons for all 3 rows of the toolbar, even if you don't want buttons in them. Example:
theme_advanced_buttons1 : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
Reference: http://tinymce.moxiecode.com/wiki.php/Configuration:theme_advanced_buttons_1_n
Otherwise, I believe you will get some default behavior. Give that a try and see if it helps.
theme_advanced_buttons1 does not worked for me so you can try this
$(window).load(function(){
$('#mce_14-body').hide();
$('#mce_28-body').hide();
$('#mce_20-body').hide();
});
id selector can point to panel or button etc.