Interactivetools.com Forum: Discontinued Products: Page Publisher: Adding TinyMCE Cross-Browser WYSIWYG editor to Page Publisher

Home: Discontinued Products: Page Publisher:
Adding TinyMCE Cross-Browser WYSIWYG editor to Page Publisher

Damon
Staff / Moderator

Dec 20, 2005, 10:59 AM

Post #1 of 1 (3469 views)
Shortcut

Adding TinyMCE Cross-Browser WYSIWYG editor to Page Publisher

Hi,

UPDATE: Page Publisher 1.25 has been released and includes the TinyMCE editor.
http://www.interactivetools.com/forum/forum.cgi?post=45152

I decided to tackle the job of adding the TinyMCE WYSIWYG editor to Page Publisher
since there was a lot of requests for a cross-browser editor and all of our developer
time is scheduled.

Here is the Browser Compatibility chart:
http://tinymce.moxiecode.com/tinymce/docs/compatiblity_chart.html

The good news is that is was fairly easy to integrate (using the the TinyMCE
documentation and forum for reference) and looks even easier to customize. :)

I set up the editor with the same buttons and layout as the current WYSIWYG
editor in Page Publisher just for consistency. Adding, removing and
rearranging the button layout easy to do by just making changes in the
_interface.html template.

The functionality appears to all be there but since 'm not a programmer, consider
this a Beta until I can get it fine tuned (track down some javascript errors and
add browser detection). Hopefully I will be able to add it to an upgrade version
of Page Publisher soon.

In addition to following the steps below, you can also email support@interactivetools.com
and ask for the templates with all the modifications already made.

Questions or Comments? Please start a new thread with any questions or
comments. I will keep editting this thread with any updates. :)

Steps to add TinyMCE WYSIWYG editor into Page Publisher:
==============================================================
1. Download the editor from the TinyMCE site:
http://tinymce.moxiecode.com/

2. Unzip the files. Upload the tiny_mce directory and files into the Page Publisher images directory.
For example, the tiny_mce directory (and all the files in it) that is here:
/tinymce_2_0_1/tinymce/jscripts/tiny_mce/*

Get upload to here:
http://www.yoursite.com/pp/images/tiny_mce/*

3. In the Setup Options of Page Publisher, under the Server tab, make sure that the Images URL uses the full URL.
For example: http://www.yoursite.com/pp/images/

4. Next open the Page Publisher _interface.html template (/pp/templates/_interface.html)to edit. Backup this template before making any changes.

Change this:

Code

 <script language="Javascript1.2"><!-- // load htmlarea  
_editor_url = "$imageurl$htmlarea/";                     // URL to htmlarea files  
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);  
if (navigator.userAgent.indexOf('Mac')        >= 0) { win_ie_ver = 0; }  
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }  
if (navigator.userAgent.indexOf('Opera')      >= 0) { win_ie_ver = 0; }  
if (win_ie_ver >= 5.5) {  
 document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');  
 document.write(' language="Javascript1.2"></scr' + 'ipt>');    
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }  
// --></script>

to this:

Code

 <!-- TinyMCE -->  
  
<script language="javascript" type="text/javascript" src="$imageurl$tiny_mce/tiny_mce.js"></script>  
<script language="javascript" type="text/javascript">  
	tinyMCE.init({  
		mode : "textareas",  
		theme : "advanced",  
		theme_advanced_fonts : "Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace;Georgia=georgia;Tahoma=Tahoma;Verdana=verdana",  
		plugins : "table,advhr,advlink,advimage,paste,fullscreen,contextmenu",  
		theme_advanced_buttons1_add : "fontselect,fontsizeselect,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,separator,bullist,numlist,separator,outdent,indent,",  
		theme_advanced_buttons2_add : "forecolor,backcolor,separator,advhr,link, image, code,fullscreen, separator, tablecontrols,separator,",  
		//theme_advanced_buttons3_add : "",  
		theme_advanced_toolbar_location : "top",  
		theme_advanced_toolbar_align : "left",  
		theme_advanced_statusbar_location : "bottom",  
		//content_css : "$imageurl$tiny_mce/themes/advanced/css/mycontent.css",  
		theme_advanced_resizing : true,								  
		theme_advanced_resize_horizontal : false,			  
		theme_advanced_disable : "styleselect, formatselect,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent, image, cut,copy,paste,undo,redo,link,unlink,Image,cleanup,help,code,hr,removeformat,sub,sup,forecolor,backcolor,charmap,visualaid,anchor,newdocument,separator"  
	});  
  
</script>  
<!-- /TinyMCE -->

5. Open the Page Publisher _page_menus.html template (/pp/templates/_page_menus.html)to edit. Backup this template before making any changes.
These changes are done to prevent the WYSIWYG from converting all the textareas into WYSIWYG editors.

In the  section, around line 251, add class="mceNoEditor" to the text area attributes.

In the  section, around line 264, add class="mceNoEditor" to the text area attributes.

In the  section, around line 335, add class="mceNoEditor" to the text area attributes.

In the  section, around line 435, add class="mceNoEditor" to the text area attributes.

In the  section, around line 277, comment out the following line like this:

Code

 <!--  
<td align=right><span id="hide$n$"><font size=2 face="ms sans serif,arial">  
<input type="radio" name="format$n$" value="text" $text_checked$> Text&nbsp;  
<input type="radio" name="format$n$" value="html" $html_checked$> HTML&nbsp;</font>  
</span></td>  
-->

This removes the Text and HTML radio buttons from above the WYSIWYG editor.

Last two steps are optional. The default font size that appears in the editor
appears to be a smaller size than what is published so here is the steps to fix that:

6. Next, edit the editor_content.css file to increase the default font size
viewed in the editor to 12px. Change the font-size from 10px to 12px
http://www.yoursite.com/pp/images/tiny_mce/themes/advanced/css/editor_content.css

7. Last step, add the following CSS to the pages the Page Publisher updates:

Code

 <style type="text/css"><!--	  
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}  
td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;  
}  
--></style>

That's it. You should now have a functioning cross-browser WYSIWYG editor.

Note: to switch back the using the previous WYSIWYG editor, simply upload your
backup copies of the _interface.html and _page_menus.html templates.

Useful links:
TinyMCE documentation: http://tinymce.moxiecode.com/documentation.php
TinyMCE forum: http://tinymce.moxiecode.com/punbb/index.php
Browser Compatibility chart: http://tinymce.moxiecode.com/tinymce/docs/compatiblity_chart.html

Let me know how this goes. :)

Cheers
Damon Edis
interactivetools.com

(This post was edited by Damon on Feb 7, 2006, 5:04 PM)

Search for (options)