refined HTML purifier settings and updated HTML docs; updates #79

OpencachingDeutschland · Aug 11, 2015 · 1786f57 · 1786f57
1 parent b771f91
commit 1786f57
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 28 deletions.
diff --git a/htdocs/lib2/OcHTMLPurifier.class.php b/htdocs/lib2/OcHTMLPurifier.class.php
@@ -32,6 +32,34 @@ function __construct($opt)
 		// adjust URI filtering to fix issue #89 (enable special chars in URIs)
 		$config->set('Core.EnableIDNA', true);
 
+		// allow comments
+		$config->set('HTML.AllowedCommentsRegexp', '/.*/');
+
+		// enable href target='_blank'
+		$config->set('Attr.AllowedFrameTargets', array('_blank','blank'));
+
+		// enable ids/names with namespace 'custom_'
+		$config->set('Attr.EnableID', true);
+		$config->set('Attr.IDPrefix', 'custom_');
+
+		// enable 'display' and 'visibility' styles for mystery descriptions
+		$config->set('CSS.AllowTricky', true);                // + display, visibility, overflow
+		$config->set('CSS.ForbiddenProperties', 'overflow');  // - overflow 
+
+		// prepare additional definitions
+		$def = $config->getHTMLDefinition(true);
+
+		// add tags
+		$def->addElement('fieldset', 'Block', 'Flow', 'Common' /* ,array('disabled' => 'Enum#disabled', 'name' => 'ID') */ ); //  HTML5 attribs currently not supported by TinyMCE
+		$def->addElement('legend', 'Inline', 'Flow', 'Common');
+		$def->addElement('q', 'Inline', 'Inline', 'Common', array('cite' => 'URI'));
+		$def->addElement('strike', 'Inline', 'Inline', 'Common');   // -> wird in CSS umgewandelt
+		$def->addElement('area', 'Inline', 'Empty', 'Common', array('alt' => 'CDATA', 'coords' => 'CDATA', 'href' => 'URI', 'shape' => 'Enum#default,rect,circle,poly', 'target' => 'Enum#_blank,blank'));
+		$def->addElement('map', 'Block', new HTMLPurifier_ChildDef_Optional('area'), 'Common', array('name' => 'ID'));
+
+		// add attributes
+		$def->addAttribute('img', 'usemap', 'CDATA');
+
 		// create parent object with config
 		parent::__construct($config);
 	}

diff --git a/htdocs/resource2/ocstyle/css/style_screen.css b/htdocs/resource2/ocstyle/css/style_screen.css
@@ -369,6 +369,7 @@ h5 {margin: 1.0em 0px 0.5em 0px; font-weight: bold; font-size: 120%;}
 p {margin: 0px 0px 0.5em 0px; padding: 0px; line-height: 1.3em; font-family: arial, sans serif; font-size: 12px; }
 p.inheader {margin:4px; font-size:125%;}
 p.spacer_before {margin-top:12px;}
+p.indent {margin-left:2em; margin-bottom:1.3em !important;}
 
 /* Lists */
 ul.noindent {margin: 0px 0px 7px 15px; padding: 0px; list-style-type: disc; list-style-position: outside; font-size: 120%;}
@@ -887,6 +888,12 @@ div.floatbox { float:right; margin-left:16px; padding-left:16px;}
 .quoteheader, .topslice_quote, .bbc_standard_quote  { display:none; }
 #forum div.rsstext img {max-width:200px; max-height:120px;}
 
+/* HTML code list */
+span.html_replacetags  { display:inline-block; width:4.3em; }
+span.html_attributes   { display:inline-block; width:5.6em; }
+span.html_replaceattrs { display:inline-block; width:4em; }
+
+
 /*---------------------------*/
 /* 9.3  Attributes           */
 /*---------------------------*/

diff --git a/htdocs/templates2/ocstyle/articles/DE/htmltags.tpl b/htdocs/templates2/ocstyle/articles/DE/htmltags.tpl
@@ -4,25 +4,85 @@
 *  Unicode Reminder メモ
 ***************************************************************************}
 
-	<div class="content2-pagetitle">
-		<img src="resource2/{$opt.template.style}/images/misc/32x32-tools.png" style="margin-right: 10px;" width="32" height="32" alt="" />Erlaubte HTML-Tags und Attribute
-	</div>
-	<div class="content-txtbox-noshade" style="padding-right: 25px;">
+<div class="content2-pagetitle">
+	<img src="resource2/{$opt.template.style}/images/misc/32x32-tools.png" style="margin-right: 10px;" width="32" height="32" alt="" />Erlaubte HTML-Tags und Attribute
+</div>
+<div class="content-txtbox-noshade" style="padding-right: 25px;">
 
+	<p>Alle hier nicht aufgeführten Tags und Attribute werden gefiltert. 
+	Gegebenenfalls wird die Liste erweitert oder um das eine oder andere Element gekürzt. 
+	Alle bereits eingestellten Beschreibungen bleiben davon jedoch unberührt.</p>
+	<p><i>Kursiv</i> wiedergegebene Tags und Attribute werden in <a href="https://de.wikipedia.org/wiki/HTML5" target="_blank">HTML5</a> nicht mehr unterstützt und sollten vermieden werden.<br /><br /></p>
 
-			<p><b>Achtung -> diese Angaben sind veraltet und werden derzeit überarbeitet. Den aktuellen Stand kann man <a href="http://forum.opencaching-network.org/index.php?topic=4135.0" target="_blank">hier</a> verfolgen.</b><br /><br />Alle hier nicht aufgeführten Tags und Attribute werden gefiltert.<br />
-			Gegebenenfalls wird die Liste erweitert oder um das eine oder andere Element gekürzt.<br />
-			Alle bereits eingestellten Beschreibungen bleiben davon jedoch unberührt.</p>
+	<div class="content2-container bg-blue02">
+	  <p class="content-title-noshade-size2" style="margin:0 !important">&nbsp;Tags</p>
+	</div>
 
+	<p><b>Die folgenden HTML-Tags sind erlaubt:</b></p>
 
-<p><b>Die folgenden HTML-Tags sind erlaubt</b></p>
-
+	<p class="indent">!--, a, abbr, <i>acronym</i>, address, area, article<sup>1</sup>, aside<sup>1</sup>, b, bdo, <i>big</i>, blockquote, br, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, <i>font</i><sup>1</sup>, h1, h2, h3, h4, h5, h6, header<sup>1</sup>, hr, i, img, ins, kbd, legend, li, map, ol, p, pre, q, samp, small, span, strike<sup>1</sup>, strong, sub, sup, table, tbody, td, th, thead, tfoot, tr, <i>tt</i>, u, ul, var<br />
 
-			<p>a, b, i, p, q, s, u, br, dd, dl, dt, em, h1, h2, h3, h4, h5, h6, hr, li, td, th, tr, tt, ol, ul, big, bdo, col, dfn, del, dir, div, ins, img, kbd, map, pre, sub, sup, var, abbr, area, cite, code, font, menu, samp, span, small, thead, tfoot, tbody, table, strong, center, strike, acronym, address, caption, isindex, colgroup, fieldset</p>
-
-			<p><b>Die folgenden HTML-Attribute sind erlaubt</b></p>
-
-
-			<p>id, src, alt, dir, rel, rev, abbr, axis, char, cite, face, href, lang, name, size, span, type, align, class, clear, color, frame, ismap, rules, scope, shape, start, style, title, value, width, border, coords, height, hspace, nowrap, nohref, target, usemap, vspace, valign, bgcolor, charoff, charset, colspan, compact, headers, noshade, rowspan, summary, longdesc, hreflang, datetime, tabindex, accesskey, background, cellspacing, cellpadding</p>
+	<p><b>Ersatz für nicht erlaubte oder veraltete Tags:</b></p>
+	<p class="indent">
+		<span class="html_replacetags">acronym</span>  &rarr; &nbsp; abbr<br />
+		<span class="html_replacetags">big</span>      &rarr; &nbsp; span style="font-size:larger"<br />
+		<span class="html_replacetags">center</span>   &rarr; &nbsp; p style="text-align:center"<br />
+		<span class="html_replacetags">s</span>        &rarr; &nbsp; span style="text-decoration:line-through"<br />
+		<span class="html_replacetags">tt</span>       &rarr; &nbsp; code
+		<br />
+	</p>
+
+	<p>
+		<sup>1</sup> Wird beim Speichern in andere Elemente umgewandelt.<br />
+		<br />
+	</p>
+
+	<div class="content2-container bg-blue02">
+	  <p class="content-title-noshade-size2" style="margin:0 !important">&nbsp;Attribute</p>
+	</div>
+
+	<p><b>Die folgenden allgemeinen HTML-Attribute sind erlaubt:</b></p>
+
+	<p class="indent">class, dir, id<sup>2</sup>, lang, style, title</p>
+
+	<p><b>Die folgenden speziellen HTML-Attribute sind erlaubt:</b></p>
+
+	<p class="indent">
+		<span class="html_attributes">a</span>           href, <i>name</i><sup>2</sup>, target='_blank'<br />
+		<span class="html_attributes">area</span>        alt, coords, href, shape, target='_blank'<br />
+		<span class="html_attributes">bdo</span>         dir<br />
+		<span class="html_attributes">blockquote</span>  cite<br />
+		<span class="html_attributes">col</span>         <i>align</i>, span, <i>width</i><br />
+		<span class="html_attributes">colgroup</span>    span<br />
+		<span class="html_attributes">del</span>         cite<br />
+		<span class="html_attributes"><i>font</i></span> color, size<br />
+		<span class="html_attributes">hr</span>          <i>size</i>, <i>noshade</i><br />
+		<span class="html_attributes">img</span>         <i>align</i>, alt, <i>border</i>, height, <i>hspace</i>, src, usemap, <i>vspace</i>, width<br />
+		<span class="html_attributes">ins</span>         cite<br />
+		<span class="html_attributes">map</span>         name<sup>2</sup><br />
+		<span class="html_attributes">ol</span>          <i>compact</i>, type<br />
+		<span class="html_attributes">q</span>           cite<br />
+		<span class="html_attributes">table</span>       <i>align</i>, <i>bgcolor</i>, <i>border</i>, <i>cellpadding</i>, <i>cellspacing</i>, <i>frame</i>, <i>rules</i>, <i>summary</i>, <i>width</i><br />
+		<span class="html_attributes">td, th</span>      <i>abbr</i>, <i>align</i>, <i>bgcolor</i>, colspan, <i>height</i>, <i>nowrap</i>, rowspan, <i>scope</i>, <i>valign</i>, <i>width</i><br />
+		<span class="html_attributes">tr</span>          <i>align</i>, <i>bgcolor</i>, <i>valign</i><br />
+		<span class="html_attributes">ul</span>          <i>compact</i><br />		
+	</p>
+
+	<p><b>Ersatz für nicht erlaubte oder veraltete Attribute:</b></p>
+	<p class="indent">
+		<span class="html_replaceattrs">align</span>    &rarr; &nbsp; style="text-align:...; vertical-align:..."<br />
+		<span class="html_replaceattrs">bgcolor</span>  &rarr; &nbsp; style="background-color:..."<br />
+		<span class="html_replaceattrs">border</span>   &rarr; &nbsp; style="border:..."<br />
+		<span class="html_replaceattrs">color</span>    &rarr; &nbsp; style="text-color:..."<br />
+		<span class="html_replaceattrs">hspace</span>   &rarr; &nbsp; style="margin-left:...; margin-right:..."<br />
+		<span class="html_replaceattrs">name</span>     &rarr; &nbsp; id="..."<br />
+		<span class="html_replaceattrs">vspace</span>   &rarr; &nbsp; style="margin-top:...; margin-bottom:..."<br />
+		<span class="html_replaceattrs">width</span>    &rarr; &nbsp; style="width:..."<br />
+	</p>
+
+	<p>
+		<sup>2</sup> Die IDs bzw. Namen müssen mit <code>custom_</code> beginnen.
+		<br /><br />
+	</p>
 
 </div>
diff --git a/htdocs/templates2/ocstyle/articles/EN/htmltags.tpl b/htdocs/templates2/ocstyle/articles/EN/htmltags.tpl
@@ -4,23 +4,85 @@
 *  Unicode Reminder メモ
 ***************************************************************************}
 
-	<div class="content2-pagetitle">
-		<img src="resource2/{$opt.template.style}/images/misc/32x32-tools.png" style="margin-right: 10px;" width="32" height="32" alt="" />Allowd HTML tags and attributes
+<div class="content2-pagetitle">
+	<img src="resource2/{$opt.template.style}/images/misc/32x32-tools.png" style="margin-right: 10px;" width="32" height="32" alt="" />Allowd HTML tags and attributes
+</div>
+<div class="content-txtbox-noshade" style="padding-right: 25px;">
+
+	<p>All tags and attributes not listed here will be filtered out by the editor. Contents of this list may change, but existing cache listings will not be affected by that.</p>
+
+	<p>Tags and attributes shown in <i>italics</i> are discontinued in <a href="https://en.wikipedia.org/wiki/HTML5" target="_blank">HTML5</a> and should be avoided.<br /><br /></p>
+
+	<div class="content2-container bg-blue02">
+	  <p class="content-title-noshade-size2" style="margin:0 !important">&nbsp;Tags</p>
+	</div>
+
+	<p><b>The following HTML tags are allowed:</b></p>
+
+	<p class="indent">!--, a, abbr, <i>acronym</i>, address, area, article<sup>1</sup>, aside<sup>1</sup>, b, bdo, <i>big</i>, blockquote, br, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, <i>font</i><sup>1</sup>, h1, h2, h3, h4, h5, h6, header<sup>1</sup>, hr, i, img, ins, kbd, legend, li, map, ol, p, pre, q, samp, small, span, strike<sup>1</sup>, strong, sub, sup, table, tbody, td, th, thead, tfoot, tr, <i>tt</i>, u, ul, var<br />
+
+	<p><b>Replacements for unsupported or obsolete tags:</b></p>
+	<p class="indent">
+		<span class="html_replacetags">acronym</span>  &rarr; &nbsp; abbr<br />
+		<span class="html_replacetags">big</span>      &rarr; &nbsp; span style="font-size:larger"<br />
+		<span class="html_replacetags">center</span>   &rarr; &nbsp; p style="text-align:center"<br />
+		<span class="html_replacetags">s</span>        &rarr; &nbsp; span style="text-decoration:line-through"<br />
+		<span class="html_replacetags">tt</span>       &rarr; &nbsp; code
+		<br />
+	</p>
+
+	<p>
+		<sup>1</sup> Are converted to other elements when text is saved.<br />
+		<br />
+	</p>
+
+	<div class="content2-container bg-blue02">
+	  <p class="content-title-noshade-size2" style="margin:0 !important">&nbsp;Attributes	</p>
+>>>>>>> refined HTML purifier settings and updated HTML docs; updates #79
 	</div>
-	<div class="content-txtbox-noshade" style="padding-right: 25px;">
 
+	<p><b>The following common HTML attributes are allowed:</b></p>
+
+	<p class="indent">class, dir, id<sup>2</sup>, lang, style, title</p>
+
+	<p><b>The following special HTML attributes are allowed:</b></p>
 
-			<p><b>Caution -> these informations are outdated and the update is in work. The recent status can be seen <a href="http://forum.opencaching-network.org/index.php?topic=4135.0" target="_blank">here</a>.</b><br /><br />All tags and attributes not listed here will be filtered out by the editor. Contents of this list may change, but existing cache listings will not be affected by that.</p>
+	<p class="indent">
+		<span class="html_attributes">a</span>           href, <i>name</i><sup>2</sup>, target='_blank'<br />
+		<span class="html_attributes">area</span>        alt, coords, href, shape, target='_blank'<br />
+		<span class="html_attributes">bdo</span>         dir<br />
+		<span class="html_attributes">blockquote</span>  cite<br />
+		<span class="html_attributes">col</span>         <i>align</i>, span, <i>width</i><br />
+		<span class="html_attributes">colgroup</span>    span<br />
+		<span class="html_attributes">del</span>         cite<br />
+		<span class="html_attributes"><i>font</i></span> color, size<br />
+		<span class="html_attributes">hr</span>          <i>size</i>, <i>noshade</i><br />
+		<span class="html_attributes">img</span>         <i>align</i>, alt, <i>border</i>, height, <i>hspace</i>, src, usemap, <i>vspace</i>, width<br />
+		<span class="html_attributes">ins</span>         cite<br />
+		<span class="html_attributes">map</span>         name<sup>2</sup><br />
+		<span class="html_attributes">ol</span>          <i>compact</i>, type<br />
+		<span class="html_attributes">q</span>           cite<br />
+		<span class="html_attributes">table</span>       <i>align</i>, <i>bgcolor</i>, <i>border</i>, <i>cellpadding</i>, <i>cellspacing</i>, <i>frame</i>, <i>rules</i>, <i>summary</i>, <i>width</i><br />
+		<span class="html_attributes">td, th</span>      <i>abbr</i>, <i>align</i>, <i>bgcolor</i>, colspan, <i>height</i>, <i>nowrap</i>, rowspan, <i>scope</i>, <i>valign</i>, <i>width</i><br />
+		<span class="html_attributes">tr</span>          <i>align</i>, <i>bgcolor</i>, <i>valign</i><br />
+		<span class="html_attributes">ul</span>          <i>compact</i><br />		
+	</p>
 
+	<p><b>Replacements for unsupported or obsolete attributes:</b></p>
+	<p class="indent">
+		<span class="html_replaceattrs">align</span>    &rarr; &nbsp; style="text-align:...; vertical-align:..."<br />
+		<span class="html_replaceattrs">bgcolor</span>  &rarr; &nbsp; style="background-color:..."<br />
+		<span class="html_replaceattrs">border</span>   &rarr; &nbsp; style="border:..."<br />
+		<span class="html_replaceattrs">color</span>    &rarr; &nbsp; style="text-color:..."<br />
+		<span class="html_replaceattrs">hspace</span>   &rarr; &nbsp; style="margin-left:...; margin-right:..."<br />
+		<span class="html_replaceattrs">name</span>     &rarr; &nbsp; id="..."<br />
+		<span class="html_replaceattrs">vspace</span>   &rarr; &nbsp; style="margin-top:...; margin-bottom:..."<br />
+		<span class="html_replaceattrs">width</span>    &rarr; &nbsp; style="width:..."<br />
+	</p>
 
-			<p><b>The following HTML tags are allowed:</b></p>
-
-
-			<p>a, b, i, p, q, s, u, br, dd, dl, dt, em, h1, h2, h3, h4, h5, h6, hr, li, td, th, tr, tt, ol, ul, big, bdo, col, dfn, del, dir, div, ins, img, kbd, map, pre, sub, sup, var, abbr, area, cite, code, font, menu, samp, span, small, thead, tfoot, tbody, table, strong, center, strike, acronym, address, caption, isindex, colgroup, fieldset</p>
-
-			<p><b>The following HTML attributes are allowed:</b></p>
-
-
-			<p>id, src, alt, dir, rel, rev, abbr, axis, char, cite, face, href, lang, name, size, span, type, align, class, clear, color, frame, ismap, rules, scope, shape, start, style, title, value, width, border, coords, height, hspace, nowrap, nohref, target, usemap, vspace, valign, bgcolor, charoff, charset, colspan, compact, headers, noshade, rowspan, summary, longdesc, hreflang, datetime, tabindex, accesskey, background, cellspacing, cellpadding</p>
+	<p>
+		<sup>2</sup> IDs and Names must start with <code>custom_</code>.
+		<br /><br />
+	</p>
 
 </div>