Geodesic Solutions Community Wiki

User Tools

Site Tools

You are here: Auction and Classified Software Support Home » Tutorials » Design - Advanced » Examples » Customizing the TinyMCE Display (WYSIWYG editor) V5
tutorials:design_adv:examples:tiny_mce

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
tutorials:design_adv:examples:tiny_mce [2009/06/04 17:10]
jonyo linked text 		tutorials:design_adv:examples:tiny_mce [2014/09/25 16:55] (current)
Line 1: Line 1:
-====== Customizing the TinyMCE Display (WYSIWYG editor) ======+====== Customizing the TinyMCE Display (WYSIWYG editor) V5 ======
  
 <tip c w>**Warning:** This is an **advanced** tutorial, involving making changes to a **System template file**. <tip c w>**Warning:** This is an **advanced** tutorial, involving making changes to a **System template file**.
Line 8: Line 8:
 </tip> </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 use it as a starting point for how to customize other aspects of the WYSIWYG editor as well.+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 ===== ===== What you need =====
 **Skills** **Skills**
-  * Comfortable with using FTP (to upload and download template files from your site) < 
   * Basic understanding of how HTML, Smarty Templates, and/or PHP works will help. <   * Basic understanding of how HTML, Smarty Templates, and/or PHP works will help. <
  
Line 18: Line 17:
 **Handy tools when editing template files:** **Handy tools when editing template files:**
   * [[http://smarty.net/manual/en/|Smarty Documentation]] <   * [[http://smarty.net/manual/en/|Smarty Documentation]] <
-  * [[http://wiki.moxiecode.com/index.php/TinyMCE:Configuration|TinyMCE Configuration Documentation]] <+  * [[http://www.tinymce.com/wiki.php/Configuration3x:Configuration|TinyMCE Configuration Documentation]] <
  
 <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 [[admin_menu/site_setup/allowed_html/start|Site Setup > Allowed HTML]].</tip> <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 [[admin_menu/site_setup/allowed_html/start|Site Setup > Allowed HTML]].</tip>
Line 24: Line 23:
 ====== Customizing the TinyMCE Configuration ====== ====== Customizing the TinyMCE Configuration ======
  
-  - First create a new template set if you have not already done so.  The template you will be customizing is **system/tinymce.tpl** which is a //system template//, see [[tutorials/design_adv/replace_system_templates]] for instructions on how to create your own template set for the purpose of editing a system template.  For the purpose of this tutorial, we will assume that you named the template set the same as in the linked instructions, **my_templates** < +  - 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** < 
-  - Copy the file **geo_templates/default/system/tinymce.tpl** into your new template set, the new location should be **geo_templates/my_templates/system/tinymce.tpl** < +  - 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**.
-  - Open the file **geo_templates/my_templates/system/tinymce.tpl** to edit it.+
   - Figure out what configuration changes you want to make.  You can find the following documentation for TinyMCE:   - Figure out what configuration changes you want to make.  You can find the following documentation for TinyMCE:
-    * [[http://wiki.moxiecode.com/index.php/TinyMCE:Configuration|configuration]] < +    * [[http://www.tinymce.com/wiki.php/Configuration3xn|configuration]] < 
-    * [[http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference|button controls]] < +    * [[http://www.tinymce.com/wiki.php/TinyMCE3x:How-tos|how to's]] < 
-    * [[http://wiki.moxiecode.com/index.php/TinyMCE:Index|Table of Contents]] (the rest of the pages under "reference" section will probably be most helpful) <+    * [[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, edit the file **geo_templates/my_templates/system/tinymce.tpl** and find the following line:+  - 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',   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: We will be adding **,link,unlink** to that line to effectively disable those 2 buttons.  So the line should now look like this:
Line 38: Line 36:
 < <
   - 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. <   - 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, in the admin at [[admin_menu/templates/template_system/start|Templates > Template System]] click the "reset sets" button. <+  - 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 ===== ===== 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]] <   * 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:+  * 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.)):
 <code html> <code html>
-tinyMCE.init({ldelim} + tinyMCE.init({ldelim} 
- theme : 'advanced', + theme : 'advanced', 
- language : 'en', + language : 'en', 
- mode : 'textareas', + mode : 'textareas', 
- plugins: 'advlink',//fix link to work in gzip + plugins: 'advlink',//fix link to work in gzip 
- editor_selector : 'editor', + editor_selector : 'editor', 
- {if $blank_screen_fix}strict_loading_mode : true,{/if} + {if $blank_screen_fix}strict_loading_mode : true,{/if} 
- theme_advanced_disable : 'visualaid,help,styleselect,cleanup,image', + theme_advanced_disable : 'visualaid,help,styleselect,cleanup,image', 
- theme_advanced_buttons3_add : 'separator,forecolor,backcolor', + theme_advanced_buttons3_add : 'separator,forecolor,backcolor', 
-{if $width > 0} + extended_valid_elements : "iframe[src|width|height|name|align|style|scrolling|frameborder|allowtransparency]", 
- width: '{$width}', + {if $width > 0} 
-{/if} + width: '{$width}', 
-{if $height > 0} + {/if} 
- height: '{$height}', + {if $height > 0} 
-{/if} + height: '{$height}', 
- content_css: 'wysiwyg.css' + {/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"}' 
 + });
 </code> </code>
 For instance, if you wanted to add a new configuration line, you would add it somewhere in that code snippet. < For instance, if you wanted to add a new configuration line, you would add it somewhere in that code snippet. <
tutorials/design_adv/examples/tiny_mce.1244135402.txt.gz · Last modified: 2014/09/25 16:55 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki