RichTextEditor

From Plex-XML
Jump to: navigation, search

Example how to integrate the Tiny-MCE richt text editor into a Plex-XML page.

Tiny-MCE home: http://tinymce.moxiecode.com/index.php

Eye.png --> Document-Model

Example

Tinymce.png
Example of a "letter-generator" with rich text editor, letter templates, boilerplates, PDF-Export and Mail/Fax client


XSLT

Integration of the external script file

<xsl:template name="additionalExternalJavaScriptFunctions">
 <additionalExternalJavaScriptFunctions>
  <script language="Javascript" type="text/javascript" src="jscript/tinymce/jscripts/tiny_mce/tiny_mce.js"/>
 </additionalExternalJavaScriptFunctions>
</xsl:template>

Example script for creating a tiny-mce editor:

<script language="javascript" type="text/javascript">
 new aaForm("aServlet","DocMyLetter",{ajaxForm:true, presubmitscript:"", validatemessage:"Pflichtfeld"});
 tinyMCE.init({
  mode : "textareas",
  theme:"advanced",
  theme_advanced_buttons1 :bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,
                           |,fontsizeselect,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,cut,copy,paste,pastetext,pasteword,|,charmap,cleanup",
  theme_advanced_buttons2 : "",
  theme_advanced_buttons3 : "",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  skin:"o2k7",
  skin_variant:"silver", 
  cleanup:true, 
 });
 Event.observe($('<xsl:value-of select="$thisForm"/>'), '<xsl:value-of select="$thisForm"/>:submit', function(){tinyMCE.triggerSave();});
</script>


Complete XSLT for a DictionaryEdit with RichTextEditor:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:import href="/WEB-INF/resources/common/DictionaryEdit.xslt"/>
 <!-- Load additional scripts -->
 <xsl:template name="additionalExternalJavaScriptFunctions">
  <additionalExternalJavaScriptFunctions>
   <script language="Javascript" type="text/javascript" src="jscript/tinymce/jscripts/tiny_mce/tiny_mce.js"/>
   <script language="Javascript" type="text/javascript" src="jscript/ajax/aa-letter/aa-letter.js"/>
  </additionalExternalJavaScriptFunctions>
 </xsl:template>
	
 <xsl:template name="additionalJavaScriptFunctions">
  <xsl:variable name="tinyForm" select="/responses/response[position()=1]/@request-name"/>
  <additionalJavaScriptFunctions>
   new aaRichTextEditor('tinyMCE');

   <!-- Catch the pre-submit event that is triggered to get the text-box content back from tinyMCE -->
   Event.observe($('<xsl:value-of select="$tinyForm"/>'), '<xsl:value-of select="$tinyForm"/>:submit', function(){tinyMCE.triggerSave();});
  </additionalJavaScriptFunctions>
 </xsl:template> 
</xsl:stylesheet>
Personal tools