Table of Contents

Customizing the TinyMCE Display (WYSIWYG editor) V5

<tip c w>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 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 TinyMCE Documentation if you need help customizing the WYSIWYG editor further than what is described here. </tip>

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

Handy tools when editing template files:

<tip c n>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 Site Setup > Allowed HTML.</tip>

Customizing the TinyMCE Configuration

  1. 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 Customizing System or Module 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 <
  2. In the admin, at Design > Manager, navigate to the folder my_templates/system/ and edit the file my_templates/system/tinymce.tpl.
  3. Figure out what configuration changes you want to make. You can find the following documentation for TinyMCE:

<

  1. 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',

<

  1. 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. <
  2. 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

	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 <p> 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. <

<script type="text/javascript">
tinyMCE_GZ.init({ldelim}
	themes : 'advanced',
	languages : 'en',
	disk_cache : true, //breaks load/unload to turn this on
	debug : false
});
</script>

<

{literal}CODE HERE{/literal} <

<

1)
May be slightly different in your version.