TinyMCE filter HTML fast vollständig raus

[Red Panda]

Hi,

ich arbeite gerade zum ersten Mal an einer Webseite, welche auf CMSimple_XH setzt, daher habt bitte Nachsicht, wenn ein paar Angaben fehlen, die wichtig sind. Ich ergänze gerne, wenn ihr mehr wissen müsst.

Verwendet wird CMSimple_XH 1.6.7 mit dem TinyMCE for CMSimple_XH-Plugin und der "full"-Konfiguration.

Folgendes Problem: Beim Bearbeiten von Seiten wird das HTML fast vollständig herausgefiltert und ich benötige das HTML genau so, wie ich es eingebe (sonst würde ich es ja so nicht eingeben ). Ich drücke im TinyMCE-Editor den HTML-Button und füge beispielsweise den folgenden Quelltext ein:

Code: Select all

<h1>Seitentitel</h1>
<div class='row'>
    <div class='col-sm-12'>
        <div class='page-header page-header-with-icon no-mg-t'>
            <i class='fa fa-briefcase'></i>
            <h2>
                    Top services
                    <small>Mauris feugiat lacus quis aliquet dapibus. Sed venenatis turpis quis neque egestas porttitor.</small>
                  </h2>
        </div>
        <div class='panels-wrapper'>
            <div class='row panels'>
                <div class='col-sm-4 panel-item'>
                    <a class='panel panel-image' href='#'>
                        <div class='panel-icon'>
                            <i class='fa fa-clock-o icon'></i>
                        </div>
                        <div class='panel-heading'><img class="img-responsive-sm" alt="Project planning" width="768" height="300" src="assets/images/demo/panels/panel_bg_compass.jpg" /></div>
                        <div class='panel-body'>
                            <h3 class='panel-title'>Project planning</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu pharetra felis.est.</p>
                        </div>
                    </a>
                </div>
                <div class='col-sm-4 panel-item'>
                    <a class='panel panel-image' href='#'>
                        <div class='panel-icon'>
                            <i class='fa fa-cog icon'></i>
                        </div>
                        <div class='panel-heading'><img class="img-responsive-sm" alt="Easy customizable" width="768" height="300" src="assets/images/demo/panels/panel_bg_hat.jpg" /></div>
                        <div class='panel-body'>
                            <h3 class='panel-title'>Easy customizable</h3>
                            <p>Etiam init rutrum ligula semper neque relu dapibus, non tempus mauris sodales.est.</p>
                        </div>
                    </a>
                </div>
                <div class='col-sm-4 panel-item'>
                    <a class='panel panel-image' href='#'>
                        <div class='panel-icon'>
                            <i class='fa fa-rocket icon'></i>
                        </div>
                        <div class='panel-heading'><img class="img-responsive-sm" alt="Fastest workers" width="768" height="300" src="assets/images/demo/panels/panel_bg_chess.jpg" /></div>
                        <div class='panel-body'>
                            <h3 class='panel-title'>Fastest workers</h3>
                            <p>Pellentesque id neque sit amet nibh placerat suscipit et a purus, mauris id.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Nach dem Speichern sieht das HTML aber nur noch so aus:

Code: Select all

<h1>Informationssicherheit</h1>
<div class="row"> </div>

Man sieht: da fehlt einiges, um nicht zu sagen beinahe alles. Was ich bereits versucht habe, ist die Datei init_full.js vom TinyMCE-Plugin um das hier zu erweitern:

Code: Select all

valid_elements : '*[*]'

Was aber überhaupt nichts bringt. Vielleicht ist der TinMCE eh völlig raus, weil das HTML erst nach dem Speichern fehlt, vielleicht findet die Filterung daher CMS-seitig statt. Da ich das CMS aber eigentlich gar nicht kenne, weiß ich das nicht.

Kann mir hier jemand einen Hinweis geben?

Besten Dank.

[Holger]

Hallo,

Dein Code enthält mehrere <h2> / <h3> Tags, die CMSimple_XH zum splitten der Seiten nutzt.
Wenn Du das so im HTML-Modus in eine Seite einfügst, wird das CMS auch automatisch einige Unterseiten anlegen.
Der Rest des Codes - weil immer bei den <hx> - Tags gesplittet - enthält dann ungültige Verschachtelungen, z.B. nicht richtig geschlossene <p> oder <div> Tags.
Diese filtert TinyMCE dann heraus, weil es eben ungültiger Code ist.

Das Splitting-Prinzip von CMSimple(_XH) ist eigentlich schon ganz gut im enthaltenen Demo-Content (Seite "Menulevels & Headings) erklärt.
Vielleicht schaust Du dir das erst noch einmal an.
Alternativ gibt es hier auch eine ausführliche Dokumentation: http://http://cmsimplexh-doku016.keil-p ... zgebiet_SW

LG
Holger

[Hartmut]

Hallo Red Panda,

damit der Editor von CMSimple_XH das HTML nicht als ausführbaren Code interpretiert, muss es "maskiert" werden, denn das gleiche Problem hatte ich bei meiner Online-Dokumentation auch.
Die "Maskierung" des nicht zu interpretierenden Codes erfolgte dort zum Beipiel mit " <span> " und " </span> "

Beispielhafte Seite:
http://cmsimplexh.webdesign-keil.de/?Fa ... Men%C3%BCs

"Maskierter" Code HTML-Code:
<pre class="codebox">
<<span>aside class="left-sidebar"</span>>
...
<<span>?php echo toc();?</span>>
<<span>?php echo sitemaplink();?</span>>
...
<<span>/aside</span>>
</pre>

Sichtbarer "Text" auf der Webseite.
<aside class="left-sidebar">
...
<?php echo toc();?>
<?php echo sitemaplink();?>
...
</aside>


Viele Grüße
Hartmut

[Holger]

Hmm, ich hab' es so verstanden, dass der Code interpretiert werden soll .

damit der Editor von CMSimple_XH das HTML nicht als ausführbaren Code interpretiert

Um "nur" den Quelltext auszugeben, müsste man im obigen Beispiel lediglich "<" und/oder ">" mit "<" bzw. mit ">" ersetzen...

[lck]

Hier ist es gut erklärt, siehe unter "Problems" und "Rendering HTML".

*Nachtrag:
Dafür gäbe es auch ein Plugin von Christoph Syntaxhighlighter_XH

[Red Panda]

Hallo Holger,

vielen Dank, das war der absolut richtige Hinweis, das hat mir sehr weitergeholfen!

Hartmut & Ludwig, das ist leider nicht das, was ich wissen wollte, aber ich bedanke mich auch bei euch, dass ihr euch die Zeit genommen habt!

Das Thema kann damit als erledigt betrachtet werden.

[wsim123]

Ich habe ein ähnliches Problem - aber wohl kein ungültiger css- Code

Dazu auf http://lefkomedia.com/adding-external-l ... -with-css/

a[target="_blank"]:after {
content: " (external)";
}

If you want an image to show after then use the following, replace IMAGEURL with the actual image URL.

a[target="_blank"]:after {
content: url(IMAGEURL);
}

Using Font Awesome Icons

If you have Font Awesome installed you can use the following:

a[target="_blank"]:after {
font-family: 'FontAwesome';
content: " \f08e";
}

Das löscht tinymce beim abspeichern.

[manu]

Hallo wsim123

Dieser Code gehört auch nicht in den editierbaren Bereich, sondern in den head Bereich des Templates, entweder inline

Code: Select all

<style>...</style>

oder ausgelagert in ein .css file. Das ist in Deiner erwähnten Anleitung nicht explizit erwähnt. Öffne von irgendeiner Webseite den Quelltext und schaue Dir den head Bereich an, dann kommst Du schon drauf.
Gruss
manu

[wsim123]

Ich kann ihn aber über ein Style in einen Anker einbinden oder über # import url(ank.css) in der Stylesheeet - da ist schon klar.

Besser wäre noch ein php für die userfuncs (oder ein plugin) bzw eine Funktion wie das
$wgExternalLinkTarget von Mediawiki, das target=_blank vergessen lässst(aber nicht einfärbt etc.)

[manu]

Ich kann ihn aber über ein Style in einen Anker einbinden oder über # import url(ank.css) in der Stylesheeet - da ist schon klar.

Pseudo Elemente kriegst Du aber ohne Getrickse nicht inline gestyled.

Besser wäre noch ein php für die userfuncs (oder ein plugin) bzw eine Funktion wie das
$wgExternalLinkTarget von Mediawiki, das target=_blank vergessen lässst(aber nicht einfärbt etc.)

... ist aber ein anderes Thema. Bei "Link einfügen" den target je nach intern/extern korrekt setzen ist IMHO keine grosse Geschichte. KISS (KeepItSimple&Smart). Möglich ist es natürlich, dies mit JS oder PHP brachial zu übersteuern.