====== Customizing the TinyMCE Display (WYSIWYG editor) V5 ====== **Warning:** This is an **advanced** tutorial, involving making changes to a **System template file**. This template, like all System templates, is very dynamic and closely related with its PHP file counterpart. Be prepared to make adjustments to make it compatible when you update the Geo software. See [[tutorials/design_adv/replace_system_templates#Geo Updates & Customized Templates]] for more info, and be sure to read those sections **BEFORE** you update, as they have some pre-update steps that will help the transition. Also note that supporting file-based template changes like this is outside the scope of the support we offer for Geo support. Geo Support can try to help you with the //how// and //where// for editing templates, but they cannot make changes for you or try to troubleshoot problems related to customized templates. Consult the [[http://wiki.moxiecode.com/index.php/TinyMCE:Index|TinyMCE Documentation]] if you need help customizing the WYSIWYG editor further than what is described here. This tutorial will specifically walk you through the process of removing the URL link/unlink buttons from the WYSIWYG editor in the software. You can also use it as a starting point for how to customize other aspects of the WYSIWYG editor, such as adding a button or changing the language pack used. ===== What you need ===== **Skills** * Basic understanding of how HTML, Smarty Templates, and/or PHP works will help. < **Handy tools when editing template files:** * [[http://smarty.net/manual/en/|Smarty Documentation]] < * [[http://www.tinymce.com/wiki.php/Configuration3x:Configuration|TinyMCE Configuration Documentation]] < **Tip:** This tutorial only covers how to remove the "link button" from the WYSIWYG editor, but someone can still add a link by entering in the HTML manually. To stop that from happening, you can dis-allow the "a" tag in the admin at [[admin_menu/site_setup/allowed_html/start|Site Setup > Allowed HTML]]. ====== Customizing the TinyMCE Configuration ====== - First copy the template file from the default template set, to your own custom one. The file to copy is **system/tinymce.tpl** which is a //system template//, see [[tutorials/design_adv/replace_system_templates]] for instructions on how to copy such files to customize them. For the purpose of this tutorial, we will assume that you named the template set the same as in the linked instructions, **my_templates** < - In the admin, at [[admin_menu/design/manager/start|Design > Manager]], navigate to the folder **my_templates/system/** and edit the file **my_templates/system/tinymce.tpl**. - Figure out what configuration changes you want to make. You can find the following documentation for TinyMCE: * [[http://www.tinymce.com/wiki.php/Configuration3xn|configuration]] < * [[http://www.tinymce.com/wiki.php/TinyMCE3x:How-tos|how to's]] < * [[http://www.tinymce.com/wiki.php/TinyMCE3x:TinyMCE_3.x|Table of Contents]] (the rest of the pages under "reference" section will probably be most helpful) < < - Since this is a tutorial specifically for removing the link and unlink buttons, we've done the research for you! To accomplish this task, find the following line in the template file: theme_advanced_disable : 'visualaid,help,styleselect,cleanup,image', We will be adding **,link,unlink** to that line to effectively disable those 2 buttons. So the line should now look like this: theme_advanced_disable : 'visualaid,help,styleselect,cleanup,image,link,unlink', < - Save and upload the changes to the file, and try it out. The link and unlink buttons should no longer be displayed on the editor. < - If anything goes wrong and you are on a live site, keep in mind to get back to using the default template quickly, you can use the "restore default" icon on the edit template page. < ===== Further TinyMCE Tips ===== * Since **tinymce.tpl** is a **System template**, it is subject to change in a new version just like any of the other system templates, which means it is possible that your custom template might break things when you update. To avoid this, be sure to follow the instructions listed at [[tutorials/design_adv/replace_system_templates#Geo Updates & Customized Templates]] < * Most changes to the TinyMCE configuration will be done in the file **geo_templates/[Template Set]/system/tinymce.tpl**, and within that file most of the customizations will be limited to this part of the file((May be slightly different in your version.)):


	tinyMCE.init({ldelim}
		theme : 'advanced',
		language : 'en',
		mode : 'textareas',
		plugins: 'advlink',//fix link to work in gzip
		editor_selector : 'editor',
		{if $blank_screen_fix}strict_loading_mode : true,{/if}
		theme_advanced_disable : 'visualaid,help,styleselect,cleanup,image',
		theme_advanced_buttons3_add : 'separator,forecolor,backcolor',
		extended_valid_elements : "iframe[src|width|height|name|align|style|scrolling|frameborder|allowtransparency]",
		{if $width > 0}
			width: '{$width}',
		{/if}
		{if $height > 0}
			height: '{$height}',
		{/if}
		//make it NOT automatically add the

around everything... Comment the line out if it is needed. forced_root_block : '', content_css: '{external file="css/wysiwyg.css"}' }); For instance, if you wanted to add a new configuration line, you would add it somewhere in that code snippet. < * On the rare occasion you need to edit the part that initializes GZIP (like if you wanted to change the theme or turn debug on or something), you would edit the part of the file that looks like this: < * We advise to stay away from editing any other part of the file besides those 2, the other parts do things a little more advanced than how TinyMCE is normally "loaded" on the page, the main reason is to allow the "show/hide" link to work, which turns the fancy editor on or off. < * Remember this is inside of a Smarty template, so here are a few common things to watch out for: * If you add anything with an open curly bracket "{" use **{ldelim}** to prevent it from being interpreted as a Smarty tag. Or just wrap it in Literal Smarty tags kind of like this: {literal}CODE HERE{/literal} < * You can use Smarty tags to accomplish fancy things if you want, like load a specific language depending on the current language ID. < <