WBB 4.1 - Vorschau von HTML-Inhalt wird als Quelltext dargestellt

CCFF · December 8, 2015 at 1:25 PM

Hallo Woltlab,

wurde ein Beitrag im Forum mit HTML erstellt, dann wird die Beitragsvorschau weder im PopOver noch in den letzten Aktivitäten als gerendertes HTML Vorschau dargestellt. Stattdessen wird nur den HTML Code angezeigt.

Besser wäre es, wenn der gerenderte HTML Code angezeigt wird.

Danke & Grüße
CCFF

SoftCreatR · December 8, 2015 at 3:41 PM

Ich befürchte, dass das nicht möglich ist, da die Vorschau beschnitten (truncate) wird und somit zu Darstellungsfehlern führen könnte. Ist aber nur eine Vermutung.

**Joshua Rüsweg** · December 8, 2015 at 4:12 PM Official Post

@SoftCreatR deswegen gibt es ja \wcf\util\StringUtil::truncateHTML()

SoftCreatR · December 8, 2015 at 4:40 PM

Ah, okay.

**Marcel Werk** · December 31, 2015 at 1:45 PM Official Post

HTML-Code von Beiträgen wird im Dashboard oder im Popover ganz bewusst nicht ausgewertet, da diese Darstellungen nicht auf die Anzeige von komplexen Formatierungen ausgelegt sind.

Dass stattdessen der HTML-Code im Dashboard angezeigt wird, konnte ich so mit einfachen HTML-Codes nicht reproduzieren. Die wurden korrekt rausgefiltert. Hier bitte ich um ein konkretes Beispiel, mit welchen HTML-Codes sich das Problem reproduzieren lässt.

CCFF · December 31, 2015 at 2:38 PM

Hallo @Marcel Werk

hier wie gewünscht ein exemplarischer HTNL/CSS Beispielcode für eine Tabelle in einem Beitrag bei dem die Beitragsvorschau des Popovers komplett versagt.

Ich kann es leider hier im Testforum nicht einbinden, da dort kein HTML zugelassen ist. Der zusätzliche CSS-Code wird in diesem Fall benötigt, da ansonsten die Tabelle nicht sauber dargestellt wird.

Die woltlabseitige Umsetzung von komplexeren Tabellen in Beiträgen ist meiner Ansicht nach leider unbefriedigend - insbesondere bei Bildschirmbreiten unter 800px. Daher der Griff zu HTML/CSS.

Danke & Grüße
CCFF

HTML

<style type="text/css">
table {
border-collapse: collapse;
text-align: right;
font-size: 0.9em;
}
caption {
border:1px dotted gray;
font-weight:bold;
letter-spacing:2px;
padding:6px 4px 8px 0px;
text-align:center;
text-transform:uppercase;
}
td, th {
padding:.4em;
text-align: left;
}
.tdrechts {
padding:.4em;
text-align: right;
}
tr {
border:1px dotted gray;
}
thead th, tfoot th {
background:#5C443A;
padding:3px 10px 3px 10px;
text-align:left;
text-transform:uppercase;
}
tbody th, tbody td {
text-align:left;
vertical-align:top;
}
tfoot td {
background:#5C443A;
color:#fff;
padding-top:3px;
}
tbody tr:hover {
border:1px solid;
}
.bg_orange {
background-color: #f60;
}
.bg_gruen {
background-color: #99ff99;
}
.bg_grau {
background-color: #555;
}
.bg_dunkelgrau {
background-color: #999;
}
.bg_weiss {
background-color: #fff;
}
.weiss {
color: #fff;
}
</style>
<a id="inhalte"></a><b>INHALT:</b><br />
<a href="https://www.domain.de/#motor">1. Motor</a><br />
<a href="https://www.domain.de/#motor_kunststoffabdeckung_unten">2. Motor - Kunststoffabdeckung unten</a><br />
<a href="https://www.domain.de/#kraftstoffversorgung">3. Kraftstoffversorgung</a><br />
<a href="https://www.domain.de/#kraftstoffeinspritzung">4. Kraftstoffeinspritzung</a><br />
<a href="https://www.domain.de/#abgasrueckfuehrungssystem">5. Abgasrückführungssystem</a><br />
<br /><br />
<table width="100%" border="0">
<caption>
Drehmomentliste
</caption>
<!-- 1. Motor -->
<tr class="bg_grau">
<td colspan="2"><span class="weiss"><a id="motor"></a>MOTOR</span></td>
</tr>
<tr class="bg_dunkelgrau">
<td><span class="weiss">Bauteilbeschreibung</span></td>
<td><span class="weiss">Nm</span></td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<!-- 2. Motor Abdeckung -->
<tr class="bg_grau">
<td colspan="2"><span class="weiss"><a id="motor_kunststoffabdeckung_unten"></a>MOTOR - KUNSTSTOFFWANNE UNTEN</span></td>
</tr>
<tr class="bg_dunkelgrau">
<td><span class="weiss">Bauteilbeschreibung</span></td>
<td><span class="weiss">Nm</span></td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<!-- 3. Kraftstoffversorgung -->
<tr class="bg_grau">
<td colspan="2"><span class="weiss"><a id="kraftstoffversorgung"></a>KRAFTSTOFFVERSORGUNG</span></td>
</tr>
<tr class="bg_dunkelgrau">
<td><span class="weiss">Bauteilbeschreibung</span></td>
<td><span class="weiss">Nm</span></td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<!-- 4. Kraftstoffeinspritzung -->
<tr class="bg_grau">
<td colspan="2"><span class="weiss"><a id="kraftstoffeinspritzung"></a>KRAFTSTOFFEINSPRITZUNG</span></td>
</tr>
<tr class="bg_dunkelgrau">
<td><span class="weiss">Bauteilbeschreibung</span></td>
<td><span class="weiss">Nm</span></td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<!-- 5. Abgasrückführungssystem -->
<tr class="bg_grau">
<td colspan="2"><span class="weiss"><a id="abgasrueckfuehrungssystem"></a>ABGASRÜCKFÜHRUNGSSYSTEM</span></td>
</tr>
<tr class="bg_dunkelgrau">
<td><span class="weiss">Bauteilbeschreibung</span></td>
<td><span class="weiss">Nm</span></td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
<tr>
<td>Bauteil</td>
<td>Wert</td>
</tr>
</table>
<br /><br />
[size=8][color=#999999]Für die Forensuche: Schlagworte [/color][/size]

Display More

**Marcel Werk** · February 5, 2016 at 5:30 PM Official Post

Das Problem ist hier der <style> Tag, der an dieser Stelle im Dokument nicht erlaubt ist. Dieser Teil sollte besser direkt in den Stil ("individuelle CSS-Deklarationen") verschoben werden.

Participate now!