[BUGFIX] Custom HTML tags no longer malformed in IE
authorBart Dubelaar <bartdubelaar@gmail.com>
Mon, 19 Mar 2012 14:44:34 +0000 (15:44 +0100)
committerStanislas Rolland <typo3@sjbr.ca>
Mon, 30 Apr 2012 23:12:24 +0000 (01:12 +0200)
Custom HTML tags would get malformed while editing in IE.
If a tag is not present in HTML4 and the document mode
of IE is lower than IE9 Standards, then the tag is not
present in the DOM and not parsed correctly.
This is fixed by specifying possible custom tags in TSconfig
and creating dummy instances of the tags before loading
the contents in the DOM, also known as the Shiv trick.

Change-Id: Ie9ee09947a88dd73f92c0330f5d0c15609a7efb3
Fixes: #34786
Releases: 4.5, 4.6, 4.7, 6.0
Reviewed-on: http://review.typo3.org/9743
Reviewed-by: Stanislas Rolland
Tested-by: Stanislas Rolland
typo3/sysext/rtehtmlarea/class.tx_rtehtmlarea_base.php
typo3/sysext/rtehtmlarea/doc/manual.sxw
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js

index d48170d..f45ece2 100644 (file)
@@ -883,10 +883,18 @@ class tx_rtehtmlarea_base extends t3lib_rteapi {
                }
 
                        // Setting the list of tags to be removed with their contents if specified in the RTE config
-               if (trim($this->thisConfig['removeTagsAndContents']))  {
+               if (trim($this->thisConfig['removeTagsAndContents'])) {
                        $configureRTEInJavascriptString .= '
                        RTEarea[editornumber].htmlRemoveTagsAndContents = /^(' . implode('|', t3lib_div::trimExplode(',', $this->thisConfig['removeTagsAndContents'], 1)) . ')$/i;';
                }
+                       // Setting array of custom tags if specified in the RTE config
+               if (!empty($this->thisConfig['customTags'])) {
+                       $customTags = t3lib_div::trimExplode(',', $this->thisConfig['customTags'], 1);
+                       if (!empty($customTags)) {
+                               $configureRTEInJavascriptString .= '
+                               RTEarea[editornumber].customTags= ' . json_encode($customTags) . ';';
+                       }
+               }
                        // Process default style configuration
                        // This default configuration is deprecated as of TYPO3 4.6 and will be removed in TYPO3 4.8.
                        // Use contentCSS instead.
index 3f3aa4c..f586473 100644 (file)
Binary files a/typo3/sysext/rtehtmlarea/doc/manual.sxw and b/typo3/sysext/rtehtmlarea/doc/manual.sxw differ
index de2f0d6..90d47a8 100644 (file)
@@ -174,8 +174,8 @@ HTMLArea.Config = function (editorId) {
        this.htmlRemoveTagsAndContents = /none/i;
                // Remove comments
        this.htmlRemoveComments = false;
-               // Custom tags (must be a regular expression)
-       this.customTags = /none/i;
+               // Array of custom tags
+       this.customTags = [];
                // BaseURL to be included in the iframe document
        this.baseURL = document.baseURI;
                // IE does not support document.baseURI
@@ -976,6 +976,7 @@ HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
                        this.getEditor().document = this.document;
                        this.getEditor()._doc = this.document;
                        this.getEditor()._iframe = iframe;
+                       this.initializeCustomTags();
                        this.createHead();
                                // Style the document body
                        Ext.get(this.document.body).addClass('htmlarea-content-body');
@@ -992,6 +993,19 @@ HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
                }
        },
        /*
+        * Create one of each of the configured custom tags so they are properly parsed by the walker when using IE
+        * See: http://en.wikipedia.org/wiki/HTML5_Shiv
+        * 
+        * @return      void
+        */
+       initializeCustomTags: function () {
+               if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || (Ext.isIE && this.document.documentMode < 9)) {
+                       Ext.each(this.config.customTags, function (tag) {
+                               this.document.createElement(tag);
+                       }, this);
+               }
+       },
+       /*
         * Build the iframe document head
         */
        createHead: function () {