Added feature #7970: htmlARea RTE: fontstyle and fontsize should not use deprecated...
authorStanislas Rolland <typo3@sjbr.ca>
Fri, 10 Oct 2008 16:33:43 +0000 (16:33 +0000)
committerStanislas Rolland <typo3@sjbr.ca>
Fri, 10 Oct 2008 16:33:43 +0000 (16:33 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@4306 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/rtehtmlarea/ChangeLog
typo3/sysext/rtehtmlarea/doc/manual.sxw
typo3/sysext/rtehtmlarea/ext_conf_template.txt
typo3/sysext/rtehtmlarea/ext_localconf.php
typo3/sysext/rtehtmlarea/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php [new file with mode: 0644]
typo3/sysext/rtehtmlarea/extensions/SelectFont/locallang.xml [new file with mode: 0644]
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/locallang.xml [new file with mode: 0644]
typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js [new file with mode: 0644]

index 8333073..1f5f2d5 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2008-10-10  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #7970: htmlARea RTE: fontstyle and fontsize should not use deprecated font tag
+
 2008-10-10  Dmitry Dulepov  <dmitry@typo3.org>
 
        * Fixed bug #9522: t3lib_BEfunc::BEenableFields generates invalid SQL
index 36ed893..7631b19 100644 (file)
@@ -1,3 +1,7 @@
+2008-10-10  Stanislas Rolland  <typo3@sjbr.ca>
+
+       * Added feature #7970: htmlARea RTE: fontstyle and fontsize should not use deprecated font tag
+
 2008-10-08  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Fixed bug #9516: htmlARea RTE: Move link tags to head
index 93be995..ea4713e 100644 (file)
Binary files a/typo3/sysext/rtehtmlarea/doc/manual.sxw and b/typo3/sysext/rtehtmlarea/doc/manual.sxw differ
index 13ff09d..ba8be0d 100644 (file)
@@ -25,7 +25,7 @@ enableImages = 0
   # cat=basic/enable/115; type=boolean; label=Enable additional inline elements: If set, the potential use of additional inline elements will be enabled.
 enableInlineElements = 0
 
-  # cat=basic/enable/117; type=boolean; label=Enable features that use the style attribute: If set, the potential use of features that use the style attribute (color) will be enabled.
+  # cat=basic/enable/117; type=boolean; label=Enable features that use the style attribute: If set, the potential use of features that use the style attribute (textcolor, bgcolor, fontstyle, fontsize) will be enabled.
 allowStyleAttribute = 1
 
   # cat=basic/enable/140; type=boolean; label=Enable links accessibility icons: If set, accessibility icons will be added in front of links.
index 86d7f15..661d21c 100644 (file)
@@ -175,12 +175,12 @@ if ($TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['allowStyleAttribute']) {
        $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['TYPO3Color']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/TYPO3Color/class.tx_rtehtmlarea_typo3color.php:&tx_rtehtmlarea_typo3color';
        $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['TYPO3Color']['addIconsToSkin'] = 0;
        $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['TYPO3Color']['disableInFE'] = 0;
+       $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['SelectFont'] = array();
+       $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['SelectFont']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php:&tx_rtehtmlarea_selectfont';
+       $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['SelectFont']['addIconsToSkin'] = 0;
+       $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['SelectFont']['disableInFE'] = 0;
        t3lib_extMgm::addPageTSConfig('<INCLUDE_TYPOSCRIPT: source="FILE:EXT:' . $_EXTKEY . '/res/style/pageTSConfig.txt">');
 }
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['DefaultFont'] = array();
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['DefaultFont']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/DefaultFont/class.tx_rtehtmlarea_defaultfont.php:&tx_rtehtmlarea_defaultfont';
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['DefaultFont']['addIconsToSkin'] = 0;
-$TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['DefaultFont']['disableInFE'] = 0;
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['InsertSmiley'] = array();
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['InsertSmiley']['objectReference'] = 'EXT:'.$_EXTKEY.'/extensions/InsertSmiley/class.tx_rtehtmlarea_insertsmiley.php:&tx_rtehtmlarea_insertsmiley';
 $TYPO3_CONF_VARS['EXTCONF'][$_EXTKEY]['plugins']['InsertSmiley']['addIconsToSkin'] = 0;
diff --git a/typo3/sysext/rtehtmlarea/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php b/typo3/sysext/rtehtmlarea/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php
new file mode 100644 (file)
index 0000000..cb96705
--- /dev/null
@@ -0,0 +1,197 @@
+<?php
+/***************************************************************
+*  Copyright notice
+*
+*  (c) 2008 Stanislas Rolland <typo3(arobas)sjbr.ca>
+*  All rights reserved
+*
+*  This script is part of the Typo3 project. The Typo3 project is
+*  free software; you can redistribute it and/or modify
+*  it under the terms of the GNU General Public License as published by
+*  the Free Software Foundation; either version 2 of the License, or
+*  (at your option) any later version.
+*
+*  The GNU General Public License can be found at
+*  http://www.gnu.org/copyleft/gpl.html.
+*
+*  This script is distributed in the hope that it will be useful,
+*  but WITHOUT ANY WARRANTY; without even the implied warranty of
+*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*  GNU General Public License for more details.
+*
+*  This copyright notice MUST APPEAR in all copies of the script!
+***************************************************************/
+/**
+ * SelectFont extension for htmlArea RTE
+ *
+ * @author Stanislas Rolland <typo3(arobas)sjbr.ca>
+ *
+ * TYPO3 SVN ID: $Id: class.tx_rtehtmlarea_selectfont.php $
+ *
+ */
+
+require_once(t3lib_extMgm::extPath('rtehtmlarea').'class.tx_rtehtmlareaapi.php');
+
+class tx_rtehtmlarea_selectfont extends tx_rtehtmlareaapi {
+
+       protected $extensionKey = 'rtehtmlarea';        // The key of the extension that is extending htmlArea RTE
+       protected $pluginName = 'SelectFont';   // The name of the plugin registered by the extension
+       protected $relativePathToLocallangFile = 'extensions/SelectFont/locallang.xml'; // Path to this main locallang file of the extension relative to the extension dir.
+       protected $relativePathToSkin = '';             // Path to the skin (css) file relative to the extension dir.
+       protected $htmlAreaRTE;                         // Reference to the invoking object
+       protected $thisConfig;                          // Reference to RTE PageTSConfig
+       protected $toolbar;                             // Reference to RTE toolbar array
+       protected $LOCAL_LANG;                          // Frontend language array
+
+       protected $pluginButtons = 'fontstyle,fontsize';
+       protected $convertToolbarForHtmlAreaArray = array (
+               'fontstyle'             => 'FontName',
+               'fontsize'              => 'FontSize',
+               );
+
+       protected $defaultFont = array(
+               'fontstyle' => array(
+                       'Arial'                 => 'Arial,sans-serif',
+                       'Arial Black'           => '\'Arial Black\',sans-serif',
+                       'Verdana'               => 'Verdana,Arial,sans-serif',
+                       'Times New Roman'       => '\'Times New Roman\',Times,serif',
+                       'Garamond'              => 'Garamond',
+                       'Lucida Handwriting'    => '\'Lucida Handwriting\'',
+                       'Courier'               => 'Courier',
+                       'Webdings'              => 'Webdings',
+                       'Wingdings'             => 'Wingdings',
+                       ),
+               'fontsize' => array(
+                       'Extra small'   =>      'xx-small',
+                       'Very small'    =>      'x-small',
+                       'Small'         =>      'small',
+                       'Medium'        =>      'medium',
+                       'Large'         =>      'large',
+                       'Very large'    =>      'x-large',
+                       'Extra large'   =>      'xx-large',
+                       ),
+               );
+
+       protected $RTEProperties;
+
+       public function main($parentObject) {
+               $enabled = parent::main($parentObject) && $GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['rtehtmlarea']['allowStyleAttribute'];
+               if ($this->htmlAreaRTE->is_FE()) {
+                       $this->RTEProperties = $this->htmlAreaRTE->RTEsetup;
+               } else {
+                       $this->RTEProperties = $this->htmlAreaRTE->RTEsetup['properties'];
+               }
+               return $enabled;
+       }
+
+       /**
+        * Return JS configuration of the htmlArea plugins registered by the extension
+        *
+        * @param       integer         Relative id of the RTE editing area in the form
+        *
+        * @return string               JS configuration for registered plugins
+        *
+        * The returned string will be a set of JS instructions defining the configuration that will be provided to the plugin(s)
+        * Each of the instructions should be of the form:
+        *      RTEarea['.$RTEcounter.']["buttons"]["button-id"]["property"] = "value";
+        */
+       public function buildJavascriptConfiguration($RTEcounter) {
+               $registerRTEinJavascriptString = '';
+               $pluginButtonsArray = t3lib_div::trimExplode(",", $this->pluginButtons);
+
+                       // Process Page TSConfig configuration for each button
+               foreach ($pluginButtonsArray as $buttonId) {
+                       if (in_array($buttonId, $this->toolbar)) {
+                               $registerRTEinJavascriptString .= $this->buildJSFontItemsConfig($RTEcounter, $buttonId);
+                       }
+               }
+               return $registerRTEinJavascriptString;
+       }
+
+       /**
+        * Return Javascript configuration of font faces
+        *
+        * @param       integer         $RTEcounter: The index number of the current RTE editing area within the form.
+        * @param       string          $buttonId: button id
+        *
+        * @return      string          Javascript configuration of font faces
+        */
+       protected function buildJSFontItemsConfig($RTEcounter, $buttonId) {
+               $configureRTEInJavascriptString = '';
+
+                       // Getting removal and addition configuration
+               $hideItems = $this->htmlAreaRTE->cleanList($this->thisConfig['hideFont' .  (($buttonId == 'fontstyle') ? 'Faces' : 'Sizes')]);
+               $addItems = $this->htmlAreaRTE->cleanList($this->thisConfig[($buttonId == 'fontstyle') ? 'fontFace' : 'fontSize']);
+               if (is_array($this->thisConfig['buttons.']) && is_array($this->thisConfig['buttons.'][$buttonId])) {
+                       if ($this->thisConfig['buttons.'][$buttonId]['removeItems']) {
+                               $hideItems = $this->thisConfig['buttons.'][$buttonId]['removeItems'];
+                       }
+                       if ($this->thisConfig['buttons.'][$buttonId]['addItems']) {
+                               $addItems = $this->thisConfig['buttons.'][$buttonId]['addItems'];
+                       }
+               }
+                       // Initializing the items array
+               $items = array();
+               if ($this->htmlAreaRTE->is_FE()) {
+                       $items['none'] = '
+                       "' . $GLOBALS['TSFE']->getLLL((($buttonId == 'fontstyle') ? 'No font' : 'No size'), $this->LOCAL_LANG) . '" : ""';
+               } else {
+                       $items['none'] = '
+                               "' . $GLOBALS['LANG']->getLL(($buttonId == 'fontstyle') ? 'No font' : 'No size') . '" : ""';
+               }
+               $defaultItems = 'none,';
+
+                       // Inserting and localizing default items
+               if ($hideItems != '*') {
+                       $index = 0;
+                       foreach ($this->defaultFont[$buttonId] as $name => $value) {
+                               if (!t3lib_div::inList($hideItems, $index+1)) {
+                                       if ($this->htmlAreaRTE->is_FE()) {
+                                               $label = $GLOBALS['TSFE']->getLLL($name,$this->LOCAL_LANG);
+                                       } else {
+                                               $label = $GLOBALS['LANG']->getLL($name);
+                                       }
+                                       $items[$name] = '
+                               "' . $name . '" : "' . $this->htmlAreaRTE->cleanList($value) . '"';
+                                       $defaultItems .= $name . ',';
+                               }
+                               $index++;
+                       }
+               }
+                       // Adding configured items
+               if (is_array($this->RTEProperties[($buttonId == 'fontstyle') ? 'fonts.' : 'fontSizes.'])) {
+                       foreach ($this->RTEProperties[($buttonId == 'fontstyle') ? 'fonts.' : 'fontSizes.'] as $name => $conf) {
+                               $name = substr($name,0,-1);
+                               $label = $this->htmlAreaRTE->getPageConfigLabel($conf['name'],0);
+                               $items[$name] = '
+                               "' . $label . '" : "' . $this->htmlAreaRTE->cleanList($conf['value']) . '"';
+                       }
+               }
+                       // Setting the JS list of options
+               $JSOptions = '';
+               $configuredItems = t3lib_div::trimExplode(',' , $this->htmlAreaRTE->cleanList($defaultItems . ',' . $addItems));
+               $index = 0;
+               foreach ($configuredItems as $name) {
+                       $JSOptions .= ($index ? ',' : '') . $items[$name];
+                       $index++;
+               }
+               $JSOptions = '{'
+                       . $JSOptions . '
+               };';
+
+                       // Adding to button JS configuration
+               if (!is_array( $this->thisConfig['buttons.']) || !is_array( $this->thisConfig['buttons.'][$buttonId.'.'])) {
+                       $configureRTEInJavascriptString .= '
+                       RTEarea['.$RTEcounter.'].buttons.'. $buttonId .' = new Object();';
+               }
+               $configureRTEInJavascriptString .= '
+                       RTEarea['.$RTEcounter.'].buttons.'. $buttonId .'.options = '. $JSOptions;
+
+               return $configureRTEInJavascriptString;
+       }
+} // end of class
+
+if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rtehtmlarea/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php']) {
+       include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/rtehtmlarea/extensions/SelectFont/class.tx_rtehtmlarea_selectfont.php']);
+}
+?>
\ No newline at end of file
diff --git a/typo3/sysext/rtehtmlarea/extensions/SelectFont/locallang.xml b/typo3/sysext/rtehtmlarea/extensions/SelectFont/locallang.xml
new file mode 100644 (file)
index 0000000..cd80c5e
--- /dev/null
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<!-- TYPO3 SVN ID: $Id: locallang.xml 2985 2008-01-31 11:37:57Z ingmars $ -->
+<T3locallang>
+       <meta type="array">
+               <description>Labels for SelectFont plugin of htmlArea RTE</description>
+               <type>module</type>
+       </meta>
+       <data type="array">
+               <languageKey index="default" type="array">
+                       <label index="No font">No font</label>
+                       <label index="No size">No font size</label>
+                       <label index="Extra small">Extra small</label>
+                       <label index="Very small">Very small</label>
+                       <label index="Small">Small</label>
+                       <label index="Medium">Medium</label>
+                       <label index="Large">Large</label>
+                       <label index="Very large">Very large</label>
+                       <label index="Extra large">Extra large</label>
+               </languageKey>
+       </data>
+       <orig_hash type="array">
+               <languageKey index="default" type="array">
+               </languageKey>
+       </orig_hash>
+       <orig_text type="array">
+               <languageKey index="default" type="array">
+               </languageKey>
+       </orig_text>
+</T3locallang>
\ No newline at end of file
index a4484d5..57b0974 100644 (file)
@@ -1747,11 +1747,8 @@ HTMLArea.hasAllowedAttributes = function(element,allowedAttributes) {
        for (var i = allowedAttributes.length; --i >= 0;) {
                value = element.getAttribute(allowedAttributes[i]);
                if (value) {
-                               // IE returns an object on getAttribute("style");
-                       if (typeof(value) == "object") {
-                               if (allowedAttributes[i] == "style" && value.cssText) {
-                                       return true;
-                               }
+                       if (allowedAttributes[i] == "style" && element.style.cssText) {
+                               return true;
                        } else {
                                return true;
                        }
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/locallang.xml b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/locallang.xml
new file mode 100644 (file)
index 0000000..152de6b
--- /dev/null
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
+<!-- TYPO3 SVN ID: $Id: locallang.xml 2985 2008-01-31 11:37:57Z ingmars $ -->
+<T3locallang>
+       <meta type="array">
+               <description>Labels for SelectFont plugin of htmlArea RTE</description>
+               <type>module</type>
+       </meta>
+       <data type="array">
+               <languageKey index="default" type="array">
+               </languageKey>
+       </data>
+       <orig_hash type="array">
+               <languageKey index="default" type="array">
+               </languageKey>
+       </orig_hash>
+       <orig_text type="array">
+               <languageKey index="default" type="array">
+               </languageKey>
+       </orig_text>
+</T3locallang>
\ No newline at end of file
diff --git a/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js b/typo3/sysext/rtehtmlarea/htmlarea/plugins/SelectFont/select-font.js
new file mode 100644 (file)
index 0000000..d0641e4
--- /dev/null
@@ -0,0 +1,235 @@
+/***************************************************************
+*  Copyright notice
+*
+*  (c) 2008 Stanislas Rolland <typo3(arobas)sjbr.ca>
+*  All rights reserved
+*
+*  This script is part of the TYPO3 project. The TYPO3 project is
+*  free software; you can redistribute it and/or modify
+*  it under the terms of the GNU General Public License as published by
+*  the Free Software Foundation; either version 2 of the License, or
+*  (at your option) any later version.
+*
+*  The GNU General Public License can be found at
+*  http://www.gnu.org/copyleft/gpl.html.
+*  A copy is found in the textfile GPL.txt and important notices to the license
+*  from the author is found in LICENSE.txt distributed with these scripts.
+*
+*
+*  This script is distributed in the hope that it will be useful,
+*  but WITHOUT ANY WARRANTY; without even the implied warranty of
+*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*  GNU General Public License for more details.
+*
+*
+*  This copyright notice MUST APPEAR in all copies of the script!
+***************************************************************/
+/*
+ * SelectFont Plugin for TYPO3 htmlArea RTE
+ *
+ * TYPO3 SVN ID: $Id: font.js  $
+ */
+SelectFont = HTMLArea.Plugin.extend({
+               
+       constructor : function(editor, pluginName) {
+               this.base(editor, pluginName);
+       },
+       
+       /*
+        * This function gets called by the class constructor
+        */
+       configurePlugin : function (editor) {
+               
+               this.options = new Object();
+               this.options.FontName = this.editorConfiguration.buttons.fontstyle ? this.editorConfiguration.buttons.fontstyle.options : null;
+               this.options.FontSize = this.editorConfiguration.buttons.fontsize ? this.editorConfiguration.buttons.fontsize.options : null;
+               this.disablePCexamples = this.editorConfiguration.disablePCexamples;
+
+                       // Font formating will use the style attribute
+               if (this.editor.plugins.TextStyle && this.editor.plugins.TextStyle.instance) {
+                       this.editor.plugins.TextStyle.instance.addAllowedAttribute("style");
+                       this.allowedAttributes = this.editor.plugins.TextStyle.instance.allowedAttributes;
+               }                       
+               if (this.editor.plugins.InlineElements && this.editor.plugins.InlineElements.instance) {
+                       this.editor.plugins.InlineElements.instance.addAllowedAttribute("style");
+                       if (!this.allowedAllowedAttributes) {
+                               this.allowedAttributes = this.editor.plugins.InlineElements.instance.allowedAttributes;
+                       }
+               }
+               if (this.editor.plugins.BlockElements && this.editor.plugins.BlockElements.instance) {
+                       this.editor.plugins.BlockElements.instance.addAllowedAttribute("style");
+               }
+               if (!this.allowedAttributes) {
+                       this.allowedAttributes = new Array("id", "title", "lang", "xml:lang", "dir", (HTMLArea.is_gecko?"class":"className"), "style");
+               }
+
+               /*
+                * Registering plugin "About" information
+                */
+               var pluginInformation = {
+                       version         : "1.0",
+                       developer       : "Stanislas Rolland",
+                       developerUrl    : "http://www.sjbr.ca/",
+                       copyrightOwner  : "Stanislas Rolland",
+                       sponsor         : "SJBR",
+                       sponsorUrl      : "http://www.sjbr.ca/",
+                       license         : "GPL"
+               };
+               this.registerPluginInformation(pluginInformation);
+               
+               /*
+                * Registering the dropdowns
+                */
+               var buttonId;
+               for (var i = 0, n = this.dropDownList.length; i < n; ++i) {
+                       var dropDown = this.dropDownList[i];
+                       buttonId = dropDown[0];
+                       var dropDownConfiguration = {
+                               id              : buttonId,
+                               tooltip         : this.localize(buttonId.toLowerCase()),
+                               options         : this.options[buttonId],
+                               action          : "onChange",
+                               context         : null
+                       };
+                       this.registerDropDown(dropDownConfiguration);
+               }
+               return true;
+        },
+        
+       /*
+        * The list of buttons added by this plugin
+        */
+       dropDownList : [
+               ["FontName", null],
+               ["FontSize", null]
+       ],
+       
+       /*
+        * Conversion object: button name to corresponding style property name
+        */
+       styleProperty : {
+               FontName        : "fontFamily",
+               FontSize        : "fontSize"
+       },
+        
+       /*
+        * This function gets called when some font style or font size was selected from the dropdown lists
+        */
+       onChange : function (editor, buttonId) {
+               var select = document.getElementById(this.editor._toolbarObjects[buttonId].elementId),
+                       param = select.value;
+               if (param == 'none') {
+                       param = "";
+               }
+               editor.focusEditor();
+               var selection = editor._getSelection(),
+                       range = editor._createRange(selection),
+                       element;
+               if (editor._selectionEmpty(selection)) {
+                       element = editor.getParentElement(selection, range);
+                               // Set the style attribute
+                       this.setStyle(element, buttonId, param);
+                               // Remove the span tag if it has no more attribute
+                       if ((element.nodeName.toLowerCase() === "span") && !HTMLArea.hasAllowedAttributes(element, this.allowedAttributes)) {
+                               editor.removeMarkup(element);
+                       }
+               } else if (editor._statusBarTree.selected) {
+                       element = editor._statusBarTree.selected;
+                               // Set the style attribute
+                       this.setStyle(element, buttonId, param);
+                               // Remove the span tag if it has no more attribute
+                       if ((element.nodeName.toLowerCase() === "span") && !HTMLArea.hasAllowedAttributes(element, this.allowedAttributes)) {
+                               editor.removeMarkup(element);
+                       }
+               } else if (editor.endPointsInSameBlock()) {
+                       element = editor._doc.createElement("span");
+                               // Set the style attribute
+                       this.setStyle(element, buttonId, param);
+                               // Wrap the selection with span tag with the style attribute
+                       editor.wrapWithInlineElement(element, selection, range);
+                       if (HTMLArea.is_gecko) {
+                               range.detach();
+                       }
+               }
+               return false;
+       },
+
+       /*
+        * This function sets the style attribute on the element
+        *
+        * @param       object  element: the element on which the style attribute is to be set
+        * @param       string  buttonId: the button being processed
+        * @param       string  value: the value to be assigned
+        *
+        * @return      void
+        */
+       setStyle : function (element, buttonId, value) {
+               element.style[this.styleProperty[buttonId]] = value;
+                       // In IE, we need to remove the empty attribute in order to unset it
+               if (HTMLArea.is_ie && !value) {
+                       element.style.removeAttribute(this.styleProperty[buttonId], false);
+               }
+               if (HTMLArea.is_opera) {
+                               // Opera 9.60 replaces single quotes with double quotes
+                       element.style.cssText = element.style.cssText.replace(/\"/g, "\'");
+                               // Opera 9.60 removes from the list of fonts any fonts that are not installed on the client system
+                               // If the fontFamily property becomes empty, it is broken and cannot be reset/unset
+                               // We remove it using cssText
+                       if (!/\S/.test(element.style[this.styleProperty[buttonId]])) {
+                               element.style.cssText = element.style.cssText.replace(/font-family: /gi, "");
+                       }
+               }
+       },
+
+       /*
+        * This function gets called when the toolbar is updated
+        */
+       onUpdateToolbar : function () {
+               var editor = this.editor;
+               if (editor.getMode() === "wysiwyg" && this.editor.isEditable()) {
+                       var parentElement = editor._statusBarTree.selected ? editor._statusBarTree.selected : editor.getParentElement(),
+                               enabled = editor.endPointsInSameBlock() && !(editor._selectionEmpty(editor._getSelection()) && parentElement.nodeName.toLowerCase() == "body"),
+                               buttonId, value, k;
+                       for (var i = this.dropDownList.length; --i >= 0;) {
+                               buttonId = this.dropDownList[i][0];
+                               if (this.isButtonInToolbar(buttonId)) {
+                                       var select = document.getElementById(editor._toolbarObjects[buttonId].elementId);
+                                       value = parentElement.style[this.styleProperty[buttonId]];
+                                       select.selectedIndex = 0;
+                                       if (value) {
+                                               var options = this.options[buttonId];
+                                               k = 0;
+                                               for (var option in options) {
+                                                       if (options.hasOwnProperty(option)) {
+                                                               if (options[option] == value
+                                                                               || options[option].replace(/[\'\"]/g, "") == value.replace(/, /g, ",").replace(/[\'\"]/g, "")) {
+                                                                       select.selectedIndex = k;
+                                                                       break;
+                                                               }
+                                                               ++k;
+                                                       }
+                                               }
+                                       }
+                                       select.disabled = !enabled;
+                                       select.className = "";
+                                       if (select.disabled) {
+                                               select.className = "buttonDisabled";
+                                       }
+                               }
+                       }
+               }
+       },
+       
+       /*
+        * This function gets called when the plugin is generated
+        */
+       onGenerate : function () {
+               if (!this.disablePCexamples && this.isButtonInToolbar("FontName")) {
+                       var select = document.getElementById(this.editor._toolbarObjects.FontName.elementId);
+                       for (var i = select.options.length; --i >= 0;) {
+                               if (HTMLArea.is_gecko) select.options[i].setAttribute("style", "font-family:" + select.options[i].value + ";");
+                                       else select.options[i].style.cssText = "font-family:" + select.options[i].value + ";";
+                       }
+               }
+       }
+});