Editing Preferences

By default the web system provides a visual editor that contains a toolbar with buttons similar to most word processing applications. It allows you to create and edit content for your web site with little HTML or CSS knowledge. You can however change your preferences so that editing can be done directly in the code (the HTML).

When To Change Your Editing Preferences

Personal Preference

If you prefer to edit the unfiltered HTML of your pages, rather than use the the TinyMCE editor that is provided by default.

When TinyMCE Has Difficulty With Custom Code

There are some occurrences where TinyMCE will either strip out or modify custom code that you've added to your site.  This has happened with code from third party sites such as Twitter.  A tell-tale sign that the editor has stripped or modified your code is if you see ![CDATA[ inserted into your custom code anywhere.

Here is some sample code from Twitter:

<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/unc_cwhr"  data-widget-id="365813761380085760">Tweets by @unc_cwhr</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Here is what the code looks like after it has been processed through the TinyMCE editor:

<a class="twitter-timeline" href="https://twitter.com/unc_cwhr" data-dnt="true" data-widget-id="365813761380085760">Tweets by @unc_cwhr</a><script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>

If you experience a problem with the TinyMCE editor stripping custom code on a page, you will always need to edit that page without it, as explained on this page.  If you later edit the page with the TinyMCE editor enabled (even if you aren't editing the custom code), all the code on the page will be processed through the editor and your custom code will once again be stripped or modified.

Note: using the 'HTML' button in the editor menu does not provided the same results as changing your editing preferences.  When editing the code through the HTML button on the editor, the code is processed through the editor and will result with the same problems.

 

Changing The Editing Preference On A Single Page

To change an individual page so that it is always edited without the TinyMCE editor...

  1. Navigate to the page you want to modify.
  2. Click the Edit tab.
  3. Above and to the right of the editor toolbar and buttons there is a Text Format option.  Change this from HTML to Plone Output Filters HTML.
EditingPreferences.png

 

Globally Changing Your Editing Preferences

You can turn off the TinyMCE editor in your personal preferences so that everything you edit in the system is via the raw source code.

  1.  Log into the web system.
  2. In the upper right-hand corner, click on your name and select Preferences.
  3. On the Personal Preferences page, change the Wysiwyg Editor setting from TinyMCE to None.