Eingabe von HTML im Quellcode

[isometric]

Wie gibt man denn so etwas in CMSimple ein?

Code: Select all

<pre><code class="html">
<nav class="nav_horizontal">
<div class="nav_row">
<ul class="menulevel1">
<li class="sdocs">Start
<ul class="menulevel2">
<li class="doc"><a href="/171/?Start/Start-%5Bde%5D">Start [de]</a></li>
<li class="doc"><a href="/171/?Start/Hello">Hello</a></li>
</ul>
</li>
<li class="doc"><a href="/171/?Templatvar">Templatvar</a></li>
</ul>
</div>
</nav>
</code></pre>

Sowohl im Tinymce, als auch im CKEditor wird das komplett durch den Wolf gedreht ...

So sieht es im CKEditor anschliessend aus:

Code: Select all

<pre><code class="html">
</code></pre>

<nav class="nav_horizontal">
<div class="nav_row">
<ul class="menulevel1">
    <li class="sdocs"><code class="html">Start </code>

        <ul class="menulevel2">
            <li class="doc"><code class="html"><a href="/171/?Start/Start-%5Bde%5D">Start [de]</a></code></li>
            <li class="doc"><code class="html"><a href="/171/?Start/Hello">Hello</a></code></li>
        </ul>
        <code class="html"> </code></li>
    <li class="doc"><code class="html"><a href="/171/?Templatvar">Templatvar</a></code></li>
</ul>
</div>
</nav>

Und so im TinyMCE

Code: Select all

<pre><code class="html"></code></pre>
<nav class="nav_horizontal">
<div class="nav_row">
<ul class="menulevel1">
<li class="sdocs">Start
<ul class="menulevel2">
<li class="doc"><a href="/171/?Start/Start-%5Bde%5D">Start [de]</a></li>
<li class="doc"><a href="/171/?Start/Hello">Hello</a></li>
</ul>
</li>
<li class="doc"><a href="/171/?Templatvar">Templatvar</a></li>
</ul>
</div>
</nav>
<pre><code class="html">
</code></pre>

[frase]

https://wiki.selfhtml.org/wiki/HTML/Tut ... darstellen

[cmb]

Alle HTML-Sonderzeichen außer in der ersten und letzten Zeile, müssen entity-escaped sein, also etwa:

Code: Select all

<pre><code class="html">
<nav class="nav_horizontal">
<div class="nav_row">
…
</nav>
</code></pre>

Um das nicht selbst zu tun, kannst Du bei TinyMCE vor dem Einfügen "als Text einfügen" wählen, dann einfügen (WYSIWYG-Modus), und abschließend bei Bedarf im HTML-Modus nachbessern.

Wenn Du viele solcher Code-Schnipsel hast, dann empfiehlt sich vielleicht der Syntaxhighlighter_XH, obwohl ich nicht sagen kann, ob dieser mit aktuellen Editor-Versionen bzw. XH 1.7 kompatibel ist. Auf jeden Fall kannst Du in der Demo sehen, dass dort auch "alles" entity-escaped ist.

[cmb]

https://wiki.selfhtml.org/wiki/HTML/Tut ... darstellen

Sollten Sie PHP verwenden, so können Sie die Funktionalität des oben vorgestellten Scripts mit der Funktion htmlentities() erreichen.

Bitte nicht htmlentities(), sondern htmlspecialchars() mit den richtigen Parametern. (Bei CMSimple_XH am besten XH_hsc()).

[isometric]

Wenn Du viele solcher Code-Schnipsel hast, dann empfiehlt sich vielleicht der Syntaxhighlighter_XH, obwohl ich nicht sagen kann, ob dieser mit aktuellen Editor-Versionen bzw. XH 1.7 kompatibel ist. Auf jeden Fall kannst Du in der Demo sehen, dass dort auch "alles" entity-escaped ist.

Syntaxhighlighter_XH:
genau so was versuche ich umzusetzen, ich möchte mir ein Archiv aufbauen, mit allem möglichen Code-Schnipseln, die es noch gibt.

Wäre halt schon irgendwie praktisch, wenn man den Code-Schnipsel so wie hier im Forum einfach rein kopieren könnte, ohne allzuviel Sonderzeichen und Tags nachbearbeiten zu müssen.

Edit:
Kann das Code Sample Plugin in CMSimple_XH funktionieren? Das sieht doch so aus, als ob man damit einfach den Code ohne viel konvertieren rein kopieren kann.

The Code Sample plugin (codesample) lets a user insert and embed syntax color highlighted code snippets into the editable area. It also adds a button to the toolbar which on click will open a dialog box to accept raw code input.

[cmb]

Kann das Code Sample Plugin in CMSimple_XH funktionieren? Das sieht doch so aus, als ob man damit einfach den Code ohne viel konvertieren rein kopieren kann.

Müsste grundsätzlich funktionieren, braucht aber anscheinend prism.js. Und wie es scheint, zeigt prism.js ohne JavaScript nichts an. Da würde ich eher Syntaxhighlighter_XH empfehlen, das ohne JS zwar kein Syntaxhighlighting zeigt, aber wenigstens den Code lesbar darstellt. Und einfaches Eingeben/Bearbeiten im Editor ist ebenfalls möglich.

[isometric]

So, erste Tests haben ergeben:
CMSimple_XH 1.6.9: Syntaxhighlighter läuft mit Tinymce, läuft nicht mit CKEditor Plugin-Version: 2.1 - 2013-10-03
CMSimple_XH 1.7: Syntaxhighlighter läuft mit Tinymce

CKEditor habe ich nicht weiter versucht.

Das Script "syntaxhl" läuft nur mit Tinymce, ist nicht kompatibel mit Tinymce4 und wird nicht mehr weiterentwickelt.
https://github.com/RichGuk/syntaxhl

NOTE: I'm no longer maintaining this anymore, if someone wishes to take over then please contact me.

https://stackoverflow.com/questions/201 ... -tinymce-4

problem is the plugin you are talking about is made according to tinymce 3 older version ... tinymce 4 has changed a lot .. change editor_plugin.js to plugin.js and editor_plugin.min.js to plugin.min.js – vishal sharma Nov 24 '13 at 13:44

Im Anhang geänderte admin.php, damit das Plugin auch in der Konfiguration von 1.7 angezeigt wird.

[cmb]

Danke fürs Testen, die Recherche und die Anpassungen für XH 1.7. Ich nehme mir Syntaxhighlighter_XH in den nächsten Tagen mal vor – eine neue Version ist sowieso längst überfällig.

[Holger]

@Christoph:

für CKEditor gibt es ein aktualisiertes Plugin: http://ckeditor.com/addon/syntaxhighlight .
Das könnte man dann gleich automatisch, wie bei fa_xh, und ohne dass der User etwas in den *.inits editiert, zur Verfügung stellen.

[cmb]

für CKEditor gibt es ein aktualisiertes Plugin: http://ckeditor.com/addon/syntaxhighlight .

Ah, danke!

Das könnte man dann gleich automatisch, wie bei fa_xh, und ohne dass der User etwas in den *.inits editiert, zur Verfügung stellen.

Von mir aus gerne – dann muss ich weniger dokumentieren, und vor allem kann ich eine Entwicklungsumgebung schneller aufsetzen.

Ich muss aber mal schauen, wie das mit Syntaxhighlighter 4 zusammen spielt. Viel hat sich wohl nicht geändert, aber ich habe es mir auch nur auf die Schnelle angeschaut.