Jump to content

<gelöst>tinymce mit javascript


uusk

Recommended Posts

Hallo,

ich benötige im tiny Editor javascript-Code zur funktionalen Erweiterung der Artikelbeschreibung.

Leider wird der js Code nicht ausgeführt. Wo kann man in einer config oder so soetwas einstellen - ist das überhaupt möglich?

Im BO habe ich "HTMLPurifier verwenden" auf "Nein" gesetzt.

Edited by uusk (see edit history)
Link to comment
Share on other sites

18 minutes ago, uusk said:

Leider wird der js Code nicht ausgeführt. Wo kann man in einer config oder so soetwas einstellen - ist das überhaupt möglich?

Nein, Javascript Code kann nicht im TinyMCE hinzugefügt werden. Man kann das zwar umprogrammieren (suche mal hier im Forum).

Evtl. macht es aber mehr Sinn den Code in der Custom.js oder im Template hinzuzufügen?! Direkt in der Datenbank könnte man auch probieren wenn es wirklich nur ein speziueller Artikel ist

Edited by JBW (see edit history)
Link to comment
Share on other sites

Danke JBW!

Hatte ich bereits probiert:

Steht in der custom.css

#fenster {
overflow: hidden;
display: none;
position: absolute;
top: 80px;
right: 20px;
font-size: 13px;
background-color: #F0F0F0;
width: 300px;
border: 1px solid black;
z-index: 100;
}
#fensterinnen {
margin: 0 auto;
width: 80%;
}

Steht in der custom.js

 $(document).ready(function() {  
   $("#zustand").click(function() {
     $("#fenster").fadeIn(250);
     });
   $("#fenster").click(function() {
     $("#fenster").fadeOut(250);
     });
 });

html in tiny

<div>
<p>Text Überschrift (<span id="zustand"><a href="#">klick hier</a></span>) / Text</p>
</div>

<div id="fenster">
<div id="fensterinnen">
<p id="qualitaetsgrade">Das ist Text</p>
<p>
<span class="erhaltungsgrade">Text eins:</span><br>
<span class="beschreibung">Text eins: Inhalt 1</span>
</p>
<p>
<span class="erhaltungsgrade">Text zwei:</span><br>
<span class="beschreibung">Text zwei: Inhalt 2</span>
</p>
<p>
<span class="erhaltungsgrade">Text drei:</span><br>
<span class="beschreibung">Text drei: Inhalt 3</span>
</p>
<span id="schliessen"><a href="#">Fenster schließen</a></span>
</div>
 <br>
</div>

Leider passiert nichts.

In der Browserconsole wird auch kein "event" angezeigt.

Es betrifft alle Artikeldetails - die Lösung mit der db geht deshalb als Option nicht.

Habe schon in google und natürlich auch schon im Forum gesucht, aber nicht konkretes gefunden. Vielleicht noch mehr Zeit zum recherchieren nehmen, mal sehen.

 

Edited by uusk (see edit history)
Link to comment
Share on other sites

Wenn ich deinen Code richtig verstehe wird beim Click auf #fenster das Element #schliessen angezeigt. Aber da Fenster in CSS als nicht sichtbar definiert ist frage ich mich wie man drauf klicken soll?

Hast du einen Beispiel Link wo  der Code aktiv ist=?

Link to comment
Share on other sites

Wenn man auf "klick hier" klickt, geht ein Fenster auf. Klickt man auf das Fenster, geht es wieder zu.
Hatte eben noch einen kleinen Fehler korrigiert.

Kopier Dir unten stehenden Code in eine html-datei und für sie dann aus.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>jQuery Beispiel: Elemente ausblenden und einblenden</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
 
<style>
#fenster {
overflow: hidden;
display: none;
position: absolute;
top: 80px;
right: 20px;
font-size: 13px;
background-color: #F0F0F0;
width: 300px;
border: 1px solid black;
z-index: 100;
}
#fensterinnen {
margin: 0 auto;
width: 80%;
}
</style>

<script>
 $(document).ready(function() {  
   $("#zustand").click(function() {
     $("#fenster").fadeIn(250);
     });
   $("#fenster").click(function() {
     $("#fenster").fadeOut(250);
     });
 });
</script>
</head>
<body>
<br><br>
 
<div>
<p>Text Überschrift (<span id="zustand"><a href="#">klick hier</a></span>) / Text</p>
</div>

<div id="fenster">
<div id="fensterinnen">
<p id="qualitaetsgrade">Das ist Text</p>
<p>
<span class="erhaltungsgrade">Text eins:</span><br>
<span class="beschreibung">Text eins: Inhalt 1</span>
</p>
<p>
<span class="erhaltungsgrade">Text zwei:</span><br>
<span class="beschreibung">Text zwei: Inhalt 2</span>
</p>
<p>
<span class="erhaltungsgrade">Text drei:</span><br>
<span class="beschreibung">Text drei: Inhalt 3</span>
</p>
<span id="schliessen"><a href="#">Fenster schließen</a></span>
</div>
 <br>
</div>
 <br>
</body>
</html>

 

Link to comment
Share on other sites

OK, gehe heute abend nochmal dran, oder morgen, habe vielleichtnoch einen kleinen Fehler eingebaut.

Im Browser debuggen geht ohne Probleme, zeigt mir auch ein event an im Code an - Bild 2643

In Prestashop nicht - Bild 2644 hc_2643.jpg.9300eed9828270cb1490f1cf5ee47f5e.jpg

Mal ne dumme Frage: Debuggen wo? Im Browser "Element untersuchen"? Wenn ich auf Debbuger gehe, was muss er mir dann anzeigen?

Danke

 

hc_2644.jpg

Link to comment
Share on other sites

5 minutes ago, uusk said:

Mal ne dumme Frage: Debuggen wo? Im Browser "Element untersuchen"? Wenn ich auf Debbuger gehe, was muss er mir dann anzeigen?

Im debugger unter Quellen die custom.js auswählen, dann dort in deinem Code einen Haltepunkt setzen, Seite neu laden und der sollte dort anhalten

Link to comment
Share on other sites

Danke JBW!!!

Hatte ich bisher mal so gemacht, habe aber keinen Mehrwert erkannt. Ich gehe jetzt mal davon aus, dass er mir bei einem Fehler einen Hinweis gibt. Hatte es soweit noch nicht probiert. Ansonsten werde ich mal googeln.

Link to comment
Share on other sites

Hab mein Problem gelöst - Lösung aus dem Internet.

Datei classes/validate.php ergänzen mit Funktion (macht Tiny JS fähig):

 public static function isCleanHtml($html, $allow_iframe = false)
    {
        $events = 'onmousedown|onmousemove|onmmouseup|onmouseover|onmouseout|onload|onunload|onfocus|onblur|onchange';
        $events .= '|onsubmit|ondblclick|onclick|onkeydown|onkeyup|onkeypress|onmouseenter|onmouseleave|onerror|onselect|onreset|onabort|ondragdrop|onresize|onactivate|onafterprint|onmoveend';
        $events .= '|onafterupdate|onbeforeactivate|onbeforecopy|onbeforecut|onbeforedeactivate|onbeforeeditfocus|onbeforepaste|onbeforeprint|onbeforeunload|onbeforeupdate|onmove';
        $events .= '|onbounce|oncellchange|oncontextmenu|oncontrolselect|oncopy|oncut|ondataavailable|ondatasetchanged|ondatasetcomplete|ondeactivate|ondrag|ondragend|ondragenter|onmousewheel';
        $events .= '|ondragleave|ondragover|ondragstart|ondrop|onerrorupdate|onfilterchange|onfinish|onfocusin|onfocusout|onhashchange|onhelp|oninput|onlosecapture|onmessage|onmouseup|onmovestart';
        $events .= '|onoffline|ononline|onpaste|onpropertychange|onreadystatechange|onresizeend|onresizestart|onrowenter|onrowexit|onrowsdelete|onrowsinserted|onscroll|onsearch|onselectionchange';
        $events .= '|onselectstart|onstart|onstop';

        if (preg_match('/<[\s]*script/ims', $html) || preg_match('/(' . $events . ')[\s]*=/ims', $html) || preg_match('/.*script\:/ims', $html)) {
            return false;
        }

        if (!$allow_iframe && preg_match('/<[\s]*(i?frame|form|input|embed|object)/ims', $html)) {
            return false;
        }

        return true;
    }

Javasript in Eingabefeld im Tinymce Editor reinschreiben mit:

<p>
<script>
/* Hier kommt dein JS-Code */
</script>

ändert sich dann beim Speichern (mit OK) in:

<script>// <![CDATA[
/* Hier kommt dein JS-Code */
// ]]></script>

Das macht er automatisch --> muss so sein, "... zwingend nötig unter XHTML."

JQuery mag der Tiny-Editor nicht so, müsste man höchstens erweitern, also nur javascript anwenden!

Viel Spass!

Edited by uusk (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...