<gelöst>tinymce mit javascript

uusk · December 3, 2020

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 December 6, 2020 by uusk (see edit history)

JBW · December 3, 2020

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 December 3, 2020 by JBW (see edit history)

uusk · December 3, 2020

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 December 3, 2020 by uusk (see edit history)

JBW · December 3, 2020

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=?

uusk · December 3, 2020

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>

<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>

JBW · December 3, 2020

Wenn es standalone funktioniert sollte es auch in Prestashop gehen. Kannst du ja im Browser debuggen

uusk · December 3, 2020

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

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

Danke

JBW · December 3, 2020

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

uusk · December 3, 2020

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.

uusk · December 6, 2020

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:

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 December 6, 2020 by uusk (see edit history)

Sign In

<gelöst>tinymce mit javascript

Recommended Posts

uusk

Link to comment

Share on other sites

JBW

Link to comment

Share on other sites

uusk

Link to comment

Share on other sites

JBW

Link to comment

Share on other sites

uusk

Link to comment

Share on other sites

JBW

Link to comment

Share on other sites

uusk

Link to comment

Share on other sites

JBW

Link to comment

Share on other sites

uusk

Link to comment

Share on other sites

uusk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com