TinyMCE filter HTML fast vollständig raus

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Red Panda
Posts: 2
Joined: Tue Nov 03, 2015 11:12 am

TinyMCE filter HTML fast vollständig raus

Post by Red Panda » Tue Nov 03, 2015 11:23 am

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
Site Admin
Posts: 3211
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by Holger » Tue Nov 03, 2015 12:34 pm

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
Posts: 535
Joined: Sat Nov 05, 2011 6:13 pm
Location: Butzbach, Deutschland
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by Hartmut » Tue Nov 03, 2015 1:12 pm

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
Site Admin
Posts: 3211
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by Holger » Tue Nov 03, 2015 1:35 pm

Hmm, ich hab' es so verstanden, dass der Code interpretiert werden soll :? .
Hartmut wrote: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
Posts: 2006
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by lck » Tue Nov 03, 2015 6:22 pm

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
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Red Panda
Posts: 2
Joined: Tue Nov 03, 2015 11:12 am

Re: TinyMCE filter HTML fast vollständig raus

Post by Red Panda » Wed Nov 04, 2015 10:56 am

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
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: TinyMCE filter HTML fast vollständig raus

Post by wsim123 » Sat Nov 07, 2015 6:50 pm

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
Posts: 860
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by manu » Mon Nov 09, 2015 11:06 am

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
Posts: 63
Joined: Thu Feb 19, 2015 4:44 pm

Re: TinyMCE filter HTML fast vollständig raus

Post by wsim123 » Mon Nov 09, 2015 1:02 pm

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
Posts: 860
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: TinyMCE filter HTML fast vollständig raus

Post by manu » Mon Nov 09, 2015 3:04 pm

wsim123 wrote: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.
wsim123 wrote: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.

Post Reply