[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>
Tue, 3 Jul 2012 03:26:03 +0000 (05:26 +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: I4b4f449007d4130418734769b511d0e397aeff01
Fixes: #34786
Releases: 4.5, 4.6, 4.7, 6.0
Reviewed-on: http://review.typo3.org/12513
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 9d8205b..e6c1ee8 100644 (file)
@@ -912,10 +912,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
                $configureRTEInJavascriptString .= '
                        RTEarea[editornumber].defaultPageStyle = "' . $this->writeTemporaryFile('', 'defaultPageStyle', 'css', $this->buildStyleSheet()) . '";';
index 7501499..c635cf4 100644 (file)
Binary files a/typo3/sysext/rtehtmlarea/doc/manual.sxw and b/typo3/sysext/rtehtmlarea/doc/manual.sxw differ
index 0e92e9b..0fb4d81 100644 (file)
@@ -126,8 +126,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
@@ -930,11 +930,25 @@ HTMLArea.Iframe = Ext.extend(Ext.BoxComponent, {
                        this.getEditor().document = this.document;
                        this.getEditor()._doc = this.document;
                        this.getEditor()._iframe = iframe;
+                       this.initializeCustomTags();
                        this.createHead();
                        this.getStyleSheets();
                }
        },
        /*
+        * 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 () {