[FEATURE] htmlArea RTE: Enable HTML5 block elements in the RTE
authorStanislas Rolland <typo3@sjbr.ca>
Fri, 27 Jan 2012 03:10:50 +0000 (22:10 -0500)
committerTolleiv Nietsch <info@tolleiv.de>
Sat, 28 Jan 2012 15:35:38 +0000 (16:35 +0100)
Enable the following HTML5 block elements in the RTE: article, aside,
footer, header, nav, section.

Change-Id: I00941fb98da93c9320a0841d558e1855ca523029
Resolves: #33480
Releases: 4.7
Reviewed-on: http://review.typo3.org/8716
Reviewed-by: Kay Strobach
Tested-by: Kay Strobach
Reviewed-by: Oliver Hader
Reviewed-by: Wouter Wolters
Tested-by: Wouter Wolters
Reviewed-by: Susanne Moog
Tested-by: Susanne Moog
Reviewed-by: Tolleiv Nietsch
Tested-by: Tolleiv Nietsch
t3lib/class.t3lib_parsehtml_proc.php
typo3/sysext/css_styled_content/static/constants.txt
typo3/sysext/css_styled_content/static/setup.txt
typo3/sysext/rtehtmlarea/doc/manual.sxw
typo3/sysext/rtehtmlarea/extensions/BlockElements/class.tx_rtehtmlarea_blockelements.php
typo3/sysext/rtehtmlarea/extensions/BlockElements/locallang.xlf
typo3/sysext/rtehtmlarea/htmlarea/htmlarea.js
typo3/sysext/rtehtmlarea/htmlarea/plugins/BlockElements/block-elements.js
typo3/sysext/rtehtmlarea/res/proc/pageTSConfig.txt

index be7dcd6..5788069 100644 (file)
@@ -44,7 +44,7 @@
 class t3lib_parsehtml_proc extends t3lib_parsehtml {
 
                // Static:
-       var $blockElementList = 'PRE,UL,OL,H1,H2,H3,H4,H5,H6,ADDRESS,DL,DD'; // List of tags for these elements
+       var $blockElementList = 'PRE,UL,OL,H1,H2,H3,H4,H5,H6,ADDRESS,DL,DD,HEADER,SECTION,FOOTER,NAV,ARTICLE,ASIDE'; // List of tags for these elements
 
                // Internal, static:
        var $recPid = 0; // Set this to the pid of the record manipulated by the class.
@@ -784,6 +784,12 @@ class t3lib_parsehtml_proc extends t3lib_parsehtml {
                                        case 'blockquote': // Keep blockquotes, but clean the inside recursively in the same manner as the main code
                                        case 'dd' : // Do the same on dd elements
                                        case 'div': // Do the same on div sections, if they were splitted
+                                       case 'header':
+                                       case 'section':
+                                       case 'footer':
+                                       case 'nav':
+                                       case 'article':
+                                       case 'aside':
                                                $blockSplit[$k] = $tag . $this->TS_transform_db($this->removeFirstAndLastTag($blockSplit[$k]), $css) . '</' . $tagName . '>' . $lastBR;
                                        break;
                                        case 'ol':
@@ -925,6 +931,12 @@ class t3lib_parsehtml_proc extends t3lib_parsehtml {
                                        case 'blockquote': // Keep blockquotes
                                        case 'dd': // Keep definitions
                                        case 'div': // Keep div sections, if they were splitted
+                                       case 'header':
+                                       case 'section':
+                                       case 'footer':
+                                       case 'nav':
+                                       case 'article':
+                                       case 'aside':
                                                $blockSplit[$k] = $tag .
                                                                                  $this->TS_transform_rte($this->removeFirstAndLastTag($blockSplit[$k]), $css) .
                                                                                  '</' . $tagName . '>';
index 86ded64..70a6a63 100644 (file)
@@ -26,7 +26,7 @@ styles.content.links {
     # cat=content/links; type=small; label= Target for external links
   extTarget = _blank
   target = {$PAGE_TARGET}
-  allowTags = b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,del,ins,span,h1,h2,h3,h4,h5,h6,address
+  allowTags = a, abbr, acronym, address, article, aside, b, bdo, big, blockquote, br, caption, center, cite, code, col, colgroup, dd, del, dfn, dl, div, dt, em, font, footer, header, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, meta, nav, ol, p, pre, q, samp, sdfield, section, small, span, strike, strong, style, sub, sup, table, thead, tbody, tfoot, td, th, tr, title, tt, u, ul, var
 }
 
 styles.content.imgtext {
index 0ae4119..f210651 100644 (file)
@@ -106,7 +106,7 @@ lib.parseFunc_RTE < lib.parseFunc
 lib.parseFunc_RTE {
        //  makelinks >
        # Processing <table> and <blockquote> blocks separately
-       externalBlocks = table, blockquote, ol,ul, div
+       externalBlocks = article, aside, blockquote, div, footer, header, nav, ol, section, table, ul
        externalBlocks {
                # The blockquote content is passed into parseFunc again...
                blockquote.stripNL=1
@@ -139,6 +139,13 @@ lib.parseFunc_RTE {
                }
                div.stripNL = 1
                div.callRecursive = 1
+
+               article < .div
+               aside < .div
+               footer < .div
+               header < .div
+               nav < .div
+               section < .div
        }
        nonTypoTagStdWrap.encapsLines {
                encapsTagList = p,pre,h1,h2,h3,h4,h5,h6,hr
index 606e123..4326653 100644 (file)
Binary files a/typo3/sysext/rtehtmlarea/doc/manual.sxw and b/typo3/sysext/rtehtmlarea/doc/manual.sxw differ
index 2255cea..c66827b 100644 (file)
@@ -2,7 +2,7 @@
 /***************************************************************
 *  Copyright notice
 *
-*  (c) 2007-2011 Stanislas Rolland <typo3(arobas)sjbr.ca>
+*  (c) 2007-2012 Stanislas Rolland <typo3(arobas)sjbr.ca>
 *  All rights reserved
 *
 *  This script is part of the Typo3 project. The Typo3 project is
@@ -66,11 +66,17 @@ class tx_rtehtmlarea_blockelements extends tx_rtehtmlarea_api {
                'h6'            => 'Heading 6',
                'pre'           => 'Preformatted',
                'address'       => 'Address',
+               'article'       => 'Article',
+               'aside'         => 'Aside',
                'blockquote'    => 'Long quotation',
-               'div'           => 'Section',
+               'div'           => 'Container',
+               'footer'        => 'Footer',
+               'header'        => 'Header',
+               'nav'           => 'Navigation',
+               'section'       => 'Section'
        );
 
-       protected $defaultBlockElementsOrder = 'none, p, h1, h2, h3, h4, h5, h6, pre, address, blockquote, div';
+       protected $defaultBlockElementsOrder = 'none, p, h1, h2, h3, h4, h5, h6, pre, address, article, aside, blockquote, div, footer, header, nav, section';
 
        /**
         * Return JS configuration of the htmlArea plugins registered by the extension
index be6b779..0acd881 100644 (file)
                        <trans-unit id="Address" xml:space="preserve">
                                <source>Address</source>
                        </trans-unit>
-                       <trans-unit id="Section" xml:space="preserve">
+                       <trans-unit id="Article" xml:space="preserve">
+                               <source>Article</source>
+                       </trans-unit>
+                       <trans-unit id="Aside" xml:space="preserve">
+                               <source>Aside</source>
+                       </trans-unit>
+                       <trans-unit id="Container" xml:space="preserve">
                                <source>Container</source>
                        </trans-unit>
+                       <trans-unit id="Footer" xml:space="preserve">
+                               <source>Footer</source>
+                       </trans-unit>
+                       <trans-unit id="Header" xml:space="preserve">
+                               <source>Header</source>
+                       </trans-unit>
+                       <trans-unit id="Navigation" xml:space="preserve">
+                               <source>Navigation</source>
+                       </trans-unit>
+                       <trans-unit id="Section" xml:space="preserve">
+                               <source>Section</source>
+                       </trans-unit>
                </body>
        </file>
 </xliff>
index e8e680e..f6f6b03 100644 (file)
@@ -43,13 +43,17 @@ Ext.apply(HTMLArea, {
        RE_tagName              : /(<\/|<)\s*([^ \t\n>]+)/ig,
        RE_head                 : /<head>((.|\n)*?)<\/head>/i,
        RE_body                 : /<body>((.|\n)*?)<\/body>/i,
+               // This expression is deprecated as of TYPO3 4.7
        Reg_body                : new RegExp('<\/?(body)[^>]*>', 'gi'),
        reservedClassNames      : /htmlarea/,
        RE_email                : /([0-9a-z]+([a-z0-9_-]*[0-9a-z])*){1}(\.[0-9a-z]+([a-z0-9_-]*[0-9a-z])*)*@([0-9a-z]+([a-z0-9_-]*[0-9a-z])*\.)+[a-z]{2,9}/i,
        RE_url                  : /(([^:/?#]+):\/\/)?(([a-z0-9_]+:[a-z0-9_]+@)?[a-z0-9_-]{2,}(\.[a-z0-9_-]{2,})+\.[a-z]{2,5}(:[0-9]+)?(\/\S+)*\/?)/i,
-       RE_blockTags            : /^(body|p|h1|h2|h3|h4|h5|h6|ul|ol|pre|dl|dt|dd|div|noscript|blockquote|form|hr|table|caption|fieldset|address|td|tr|th|li|tbody|thead|tfoot|iframe)$/i,
+               // This expression is deprecated as of TYPO3 4.6
+       RE_blockTags            : /^(address|article|aside|body|blockquote|caption|dd|div|dl|dt|fieldset|footer|form|header|hr|h1|h2|h3|h4|h5|h6|iframe|li|ol|p|pre|nav|noscript|section|table|tbody|td|tfoot|th|thead|tr|ul)$/i,
+               // This expression is deprecated as of TYPO3 4.6
        RE_closingTags          : /^(p|blockquote|a|li|ol|ul|dl|dt|td|th|tr|tbody|thead|tfoot|caption|colgroup|table|div|b|bdo|big|cite|code|del|dfn|em|i|ins|kbd|label|q|samp|small|span|strike|strong|sub|sup|tt|u|var|abbr|acronym|font|center|object|embed|style|script|title|head)$/i,
-       RE_noClosingTag         : /^(img|br|hr|col|input|area|base|link|meta|param)$/i,
+               // This expression is deprecated as of TYPO3 4.6
+       RE_noClosingTag         : /^(area|base|br|col|command|embed|hr|img|input|keygen|meta|param|source|track|wbr)$/i,
        RE_numberOrPunctuation  : /[0-9.(),;:!¡?¿%#$'"_+=\\\/-]*/g,
        /***************************************************
         * LOCALIZATION                                    *
@@ -2885,9 +2889,8 @@ HTMLArea.DOM = function () {
                /***************************************************
                *  DOM-RELATED REGULAR EXPRESSIONS
                ***************************************************/
-               RE_blockTags: /^(body|p|h1|h2|h3|h4|h5|h6|ul|ol|pre|dl|dt|dd|div|noscript|blockquote|form|hr|table|caption|fieldset|address|td|tr|th|li|tbody|thead|tfoot|iframe)$/i,
-               RE_closingTags: /^(p|blockquote|a|li|ol|ul|dl|dt|td|th|tr|tbody|thead|tfoot|caption|colgroup|table|div|b|bdo|big|cite|code|del|dfn|em|i|ins|kbd|label|q|samp|small|span|strike|strong|sub|sup|tt|u|var|abbr|acronym|font|center|object|embed|style|script|title|head)$/i,
-               RE_noClosingTag: /^(img|br|hr|col|input|area|base|link|meta|param)$/i,
+               RE_blockTags: /^(address|article|aside|body|blockquote|caption|dd|div|dl|dt|fieldset|footer|form|header|hr|h1|h2|h3|h4|h5|h6|iframe|li|ol|p|pre|nav|noscript|section|table|tbody|td|tfoot|th|thead|tr|ul)$/i,
+               RE_noClosingTag: /^(area|base|br|col|command|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i,
                RE_bodyTag: new RegExp('<\/?(body)[^>]*>', 'gi'),
                /***************************************************
                *  STATIC METHODS ON DOM NODE
@@ -3441,7 +3444,7 @@ HTMLArea.DOM.Walker = Ext.extend(HTMLArea.DOM.Walker, {
                for (var i = 0, n = attributes.length; i < n; i++) {
                        html +=  ' ' + attributes[i]['attributeName'] + '="' + HTMLArea.util.htmlEncode(attributes[i]['attributeValue']) + '"';
                }
-               html = '<' + node.nodeName.toLowerCase() + html + (HTMLArea.RE_noClosingTag.test(node.nodeName) ? ' />' : '>');
+               html = '<' + node.nodeName.toLowerCase() + html + (HTMLArea.DOM.RE_noClosingTag.test(node.nodeName) ? ' />' : '>');
                        // Fix orphan list elements
                if (/^li$/i.test(node.nodeName) && !/^[ou]l$/i.test(node.parentNode.nodeName)) {
                        html = '<ul>' + html;
@@ -3455,7 +3458,7 @@ HTMLArea.DOM.Walker = Ext.extend(HTMLArea.DOM.Walker, {
         * @return      object          closing tag, if required
         */
        setClosingTag: function (node) {
-               var html = HTMLArea.RE_noClosingTag.test(node.nodeName) ? '' : '</' + node.nodeName.toLowerCase() + '>';
+               var html = HTMLArea.DOM.RE_noClosingTag.test(node.nodeName) ? '' : '</' + node.nodeName.toLowerCase() + '>';
                        // Fix orphan list elements
                if (/^li$/i.test(node.nodeName) && !/^[ou]l$/i.test(node.parentNode.nodeName)) {
                        html += '</ul>';
@@ -4340,7 +4343,7 @@ HTMLArea.DOM.Selection = Ext.extend(HTMLArea.DOM.Selection, {
                        range.deleteContents();
                }
                this.empty();
-               if (!block || /^(td|div)$/i.test(block.nodeName)) {
+               if (!block || /^(td|div|article|aside|footer|header|nav|section)$/i.test(block.nodeName)) {
                        if (!block) {
                                block = doc.body;
                        }
index 01f7901..b89fcc1 100644 (file)
@@ -67,8 +67,8 @@ HTMLArea.BlockElements = Ext.extend(HTMLArea.Plugin, {
                }
                this.indentedList = null;
                        // Standard block formating items
-               var standardElements = new Array("address", "blockquote", "div", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre");
-               this.standardBlockElements = new RegExp( "^(" + standardElements.join("|") + ")$", "i");
+               var standardElements = new Array('address', 'article', 'aside', 'blockquote', 'div', 'footer', 'header', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'nav', 'p', 'pre', 'section');
+               this.standardBlockElements = new RegExp( '^(' + standardElements.join('|') + ')$', 'i');
                        // Process block formating customization configuration
                this.formatBlockItems = {};
                if (this.buttonsConfiguration
@@ -245,23 +245,29 @@ HTMLArea.BlockElements = Ext.extend(HTMLArea.Plugin, {
                }
                if (this.standardBlockElements.test(tagName) || tagName == "none") {
                        switch (tagName) {
-                               case "blockquote" :
-                                       this.onButtonPress(this.editor, "Blockquote", null, className);
+                               case 'blockquote':
+                                       this.onButtonPress(this.editor, 'Blockquote', null, className);
                                        break;
-                               case "div"     :
-                               case "address" :
-                               case "none"    :
+                               case 'address':
+                               case 'article':
+                               case 'aside':
+                               case 'div':
+                               case 'footer':
+                               case 'header':
+                               case 'nav':
+                               case 'section':
+                               case 'none':
                                        this.onButtonPress(this.editor, tagName, null, className);
                                        break;
                                default :
                                        var element = tagName;
                                        if (Ext.isIE) {
-                                               element = "<" + element + ">";
+                                               element = '<' + element + '>';
                                        }
                                        this.editor.focus();
                                        if (Ext.isWebKit) {
                                                if (!this.editor.document.body.hasChildNodes()) {
-                                                       this.editor.document.body.appendChild((this.editor.document.createElement("br")));
+                                                       this.editor.document.body.appendChild((this.editor.document.createElement('br')));
                                                }
                                                        // WebKit sometimes leaves empty block at the end of the selection
                                                this.editor.document.body.normalize();
@@ -508,8 +514,14 @@ HTMLArea.BlockElements = Ext.extend(HTMLArea.Plugin, {
                                        this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
                                }
                                break;
-                       case "address" :
-                       case "div"     :
+                       case 'address':
+                       case 'article':
+                       case 'aside':
+                       case 'div':
+                       case 'footer':
+                       case 'header':
+                       case 'nav':
+                       case 'section':
                                var bookmark = this.editor.getBookMark().get(range);
                                var newBlock = this.wrapSelectionInBlockElement(buttonId, className, null, true);
                                this.editor.getSelection().selectRange(this.editor.getBookMark().moveTo(bookmark));
index 059482c..5a44ce1 100644 (file)
@@ -29,7 +29,7 @@ RTE.default.proc {
        preserveDIVSections = 1
 
                ## TAGS ALLOWED OUTSIDE P & DIV
-       allowTagsOutside = hr, address
+       allowTagsOutside = address, article, aside, blockquote, footer, header, hr, nav, section
 
                ## TAGS ALLOWED
                ## Added to the default internal list: b,i,u,a,img,br,div,center,pre,font,hr,sub,sup,p,strong,em,li,ul,ol,blockquote,strike,span
@@ -38,8 +38,8 @@ RTE.default.proc {
                ## b and i will be remapped on exit (see below).
                ## Note that the link accessibility feature of htmlArea RTE does insert img tags.
        allowTags (
-               a, abbr, acronym, address, b, bdo, big, blockquote, br, caption, center, cite, code, col, colgroup, dd, del, dfn, dl, div, dt, em, font,
-               h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, meta, ol, p, pre, q, samp, sdfield, small,
+               a, abbr, acronym, address, article, aside, b, bdo, big, blockquote, br, caption, center, cite, code, col, colgroup, dd, del, dfn, dl, div, dt, em, font, footer,
+               header, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, meta, nav, ol, p, pre, q, samp, sdfield, section, small,
                span, strike, strong, style, sub, sup, table, thead, tbody, tfoot, td, th, tr, title, tt, u, ul, var
                )