Eingabe von HTML im Quellcode

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
isometric
Posts: 158
Joined: Thu Jun 12, 2014 8:32 am

Eingabe von HTML im Quellcode

Post by isometric » Wed Jun 21, 2017 9:39 am

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>
in diesem Sinne isometric


cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Eingabe von HTML im Quellcode

Post by cmb » Wed Jun 21, 2017 9:55 am

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.
Christoph M. Becker – Plugins for CMSimple_XH

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Eingabe von HTML im Quellcode

Post by cmb » Wed Jun 21, 2017 9:58 am

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()).
Christoph M. Becker – Plugins for CMSimple_XH

isometric
Posts: 158
Joined: Thu Jun 12, 2014 8:32 am

Re: Eingabe von HTML im Quellcode

Post by isometric » Wed Jun 21, 2017 10:55 am

cmb wrote: 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.
in diesem Sinne isometric

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Eingabe von HTML im Quellcode

Post by cmb » Wed Jun 21, 2017 12:05 pm

isometric wrote: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.
Christoph M. Becker – Plugins for CMSimple_XH

isometric
Posts: 158
Joined: Thu Jun 12, 2014 8:32 am

Re: Eingabe von HTML im Quellcode

Post by isometric » Wed Jun 21, 2017 1:31 pm

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.
You do not have the required permissions to view the files attached to this post.
in diesem Sinne isometric

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Eingabe von HTML im Quellcode

Post by cmb » Wed Jun 21, 2017 6:07 pm

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.
Christoph M. Becker – Plugins for CMSimple_XH

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: Eingabe von HTML im Quellcode

Post by Holger » Wed Jun 21, 2017 7:55 pm

@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
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Eingabe von HTML im Quellcode

Post by cmb » Wed Jun 21, 2017 10:06 pm

Holger wrote:für CKEditor gibt es ein aktualisiertes Plugin: http://ckeditor.com/addon/syntaxhighlight .
Ah, danke!
Holger wrote: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.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply