This project is read-only.

changing buttons configuration in tinyMCE editor

Topics: Developer Forum
Sep 29, 2008 at 3:10 PM
Hi all!

Does someone know how to change button configuration in tinymce editor? I miss buttons like font size and font color, also some css style selector.
I found info about <tinyMCE><settings></settings></tinyMCE> tags in web.config, however I dont know is it related with buttons and how.
I guess that some way exist, because in release note for 1.4.2 version i found:
This release features improved wiki functionality, configurable tinymce free text editor, special handling of the dreaded wrong class exception ..

Sep 29, 2008 at 4:36 PM
you can do so in the web.config.$0In <n2><edit> you can for example set$0$0$0<tinyMCE enabled="true" cssUrl="/edit/css/editor.css">$0$0 <settings>$0$0 <add key="mode" value="exact"/>$0$0 <add key="content_css" value="FreeTextArea"/>$0$0 <add key="theme" value="advanced"/>$0$0 <add key="theme_advanced_layout_manager" value="SimpleLayout"/>$0$0 <add key="theme_advanced_resizing" value="true"/>$0$0 <add key="theme_advanced_resize_horizontal" value="true"/>$0$0 <add key="CssClass" value="FreeTextArea"/>$0$0 <add key="plugins" value="safari,spellchecker,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,imagemanager,filemanager"/>$0$0 <add key="theme_advanced_buttons1" value="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect"/>$0$0 <add key="theme_advanced_buttons2" value="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"/>$0$0 <add key="theme_advanced_buttons3" value="tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,fullscreen"/>$0$0 <add key="theme_advanced_buttons4" value="insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,pagebreak"/>$0$0 <add key="extended_valid_elements" value="hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],pre[class],code[class],iframe[src|name|class|style|frameborder]"/>$0$0 <add key="theme_advanced_disable" value="help,paste,emotions,iespell,styleprops"/>$0$0 <add key="relative_urls" value="true"/>$0$0 <add key="apply_source_formatting" value="true"/>$0$0 </settings>$0$0 </tinyMCE>$0$0$0$0$0one problem though, see http://www.codeplex.com/n2/WorkItem/View.aspx?WorkItemId=18720$0$0But, it works!$0$0
Sep 29, 2008 at 4:38 PM
sorry, shouldn't use Google Chrome with CodePlex...messes up the formatting.
The post again:

you can do so in the web.config.
In <n2><edit> you can for example set

<tinyMCE enabled="true" cssUrl="/edit/css/editor.css">
                <settings>
                    <add key="mode" value="exact"/>
                    <add key="content_css" value="FreeTextArea"/>
                    <add key="theme" value="advanced"/>
                    <add key="theme_advanced_layout_manager" value="SimpleLayout"/>
                    <add key="theme_advanced_resizing" value="true"/>
                    <add key="theme_advanced_resize_horizontal" value="true"/>
                    <add key="CssClass" value="FreeTextArea"/>
                    <add key="plugins" value="safari,spellchecker,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,imagemanager,filemanager"/>
                    <add key="theme_advanced_buttons1" value="bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect"/>
                    <add key="theme_advanced_buttons2" value="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"/>
                    <add key="theme_advanced_buttons3" value="tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,fullscreen"/>
                    <add key="theme_advanced_buttons4" value="insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,pagebreak"/>
                    <add key="extended_valid_elements" value="hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],pre[class],code[class],iframe[src|name|class|style|frameborder]"/>
                    <add key="theme_advanced_disable" value="help,paste,emotions,iespell,styleprops"/>
                    <add key="relative_urls" value="true"/>
                    <add key="apply_source_formatting" value="true"/>
                </settings>
            </tinyMCE>

one problem though, see http://www.codeplex.com/n2/WorkItem/View.aspx?WorkItemId=18720
But, it works!
Sep 30, 2008 at 11:49 AM
thanks, man.