Changing tinyMCE configuration

Mar 4, 2008 at 9:32 AM
Hi,

is there a possibility to change the tineMCE configuration?
For example, add and remove buttons or enable buttons which are disabled in the source (themeadvanceddisable : 'help,fontselect,fontsizeselect,forecolor,backcolor,styleselect',) ?

Thanks!

Martijn
Coordinator
Mar 4, 2008 at 12:13 PM
I've thought about it but havn't mustered this yet. The easiest option might be looking at the n2.web.ui.webcontrols.freetextarea control and either inheriting or copying as needed (then you could use a n2.details.editable attribute to wire your control to edit your property).
Mar 4, 2008 at 2:22 PM
Okay, that should work.

But still...it's a shame it cannot be configured anywhere since it is an important part of the CMS.
I wonder why you decided to disable some of the controls in the init function...that way there is no option, not even via changing the .js files, to use these controls.

Mar 4, 2008 at 4:34 PM
Edited Mar 4, 2008 at 4:38 PM
mmm, overriding just the OnPreRender function and the script strings does not seem to work...the script is written to the page twice...the original way and the overridden way
Copy does work expect that I get an error when I add fontsizeselect...('c' is null or not an object).
Mar 4, 2008 at 5:48 PM
The error is solved now...I updated tineyMCE to the latest version.

One thing keeps bothering me and that is that applying one of the items in one of the selectboxes Format, Fontsize, Font or Style does not work correctly in IE (7 and 6)...
It does work from the example page http://tinymce.moxiecode.com/example_full.php?example=true, not from the edit boxes I have (not my custom implementation, not the default).

If you add one of the selects to the page, go to the edit mode, select text, select font-size 4 for example, it is not applied to the selected text but to the top of the textarea or the first paragraph or the entire text....
Very strange. It does look like there is a configuration problem from the code....

I use this code to use my custom editor:
Editable("Hoofdtekst", typeof(TambienFreeTextArea), "Text", 130, ContainerName = "translated")
N2.Web.UI.EditorModifier("Width", "590px")
public virtual string Text
{
get { return (string)GetDetail("Hoofdtekst") ?? String.Empty; }
set { SetDetail("Hoofdtekst", value); }
}

The implemtation of the editor is copied from n2.web.ui.webcontrols.freetextarea in it's own class:
public class TambienFreeTextArea : TextBox

in here I changed the string scriptFormat to
private string scriptFormat =
@"
tinyMCE.init({{
mode : 'exact',
elements : '{0}',
plugins : '{1}',
content_css : '{2}',
theme : 'advanced',
//plugins : 'style,layer,table,advimage,advlink,iespell,flash,searchreplace,print,contextmenu,paste,fullscreen,noneditable',
plugins : 'safari,spellchecker,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,pagebreak,imagemanager,filemanager',
theme_advanced_buttons1 : 'bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
theme_advanced_buttons2 : 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor',
theme_advanced_buttons3 : 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,fullscreen',
theme_advanced_buttons4 : 'insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_path_location : 'bottom',
plugin_insertdate_dateFormat : '%Y-%m-%d',
plugin_insertdate_timeFormat : '%H:%M:%S',
extended_valid_elements : 'hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],pre[class],code[class]',
external_link_list_url : 'example_link_list.js',
external_image_list_url : 'example_image_list.js',
flash_external_list_url : 'example_flash_list.js',
file_browser_callback : 'fileBrowserCallBack',
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
theme_advanced_disable : 'help,paste,emotions,iespell,styleprops',
relative_urls : false,
noneditable_noneditable_class : 'cs,csharp,vb,js',
apply_source_formatting : true
}});
var popupOptions='{3}';
fileBrowserUrl = '{4}';
";

and the types in the two RegisterClientScriptBlock to my own TambienFreeTextArea.
This way the editor is just about full functional.

Does anybody else have the strange behaviour when using a select?
Coordinator
Mar 5, 2008 at 12:13 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.