Problem Tinymce3 ändert Quelltext bei video

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Di 13. Jul 2021, 14:17

Hallo, ich habe bei einer 4.10.1 Installation mit dem tinymce3 ein Problem.

Ich kopiere einen Quelltext hinein:

Code: Alles auswählen

<video class="wh100" src="upload/video/test.mp4" playsinline poster="upload/video/test.jpg"></video>
Nach dem klick auf aktualisieren und wieder klick auf das html Zeichen sieht der quelltext jetzt so aus:

Code: Alles auswählen

<video width="320" height="240" class="wh100" src="upload/video/test.mp4" playsinline="" poster="upload/video/test.jpg"><object width="320" height="240" data="http://testdomain.de/contenido/external/wysiwyg/tinymce3/jscripts/tiny_mce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="http://testdomain.de/contenido/external/wysiwyg/tinymce3/jscripts/tiny_mce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/cms/upload/video/test.mp4&amp;poster=/cms/upload/video/test.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object></video>
Der funktioniert natürlich nicht. Eigentlich sollte der Tiny doch Alles an HTML akzeptieren wenn in den Mandanteneinstellungen steht:

Code: Alles auswählen

tinymce	extended_valid_elements	*[*]	
tinymce	valid_elements	*[*]
Wie bekomme ich das hin, dass er den html Code so übernimmt, wie er war und ihn nicht verändert?

Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Di 13. Jul 2021, 22:35

Hallo larslunsen,

auf Stack Overflow hat ein User ein ähnliches Problem geschildert, anscheinend kann man das mit einer protect-Einstellung unterbinden.

Code: Alles auswählen

protect: [
    /\<\/?video[^>]*\>/g
]
Link zum Beitrag in Stack Overflow:
https://stackoverflow.com/questions/426 ... ot-working

Gruß
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Mi 14. Jul 2021, 07:45

Hallo Danke für die Info.

Kannst du mir noch auf die Sprünge helfen, wo ich das einfügen muss? In einer Datei im tinymce3 Ordner oder wo?

Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Mi 14. Jul 2021, 08:30

...In einer Datei im tinymce3 Ordner oder wo?...
Vermutlich kann man das im Backend unter "Administration > System > Experteneinstellungen" oder "Administration > Mandanten > Mandant > Mandanteneinstellungen" wie folgt angeben:

Code: Alles auswählen

Typ: tinymce
Name: protect
Wert: [/\<\/?video[^>]*\>/g]
Falls das nicht klappt, kann man das sicherlich auch in der TinyMCE Konfiguration in contenido/external/wysiwyg/tinymce3/tinymce.tpl.html setzen.

Gruß
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Mi 14. Jul 2021, 08:47

Hallo, also bei den Experteneinstellungen und den Mandanteneinstellungen wird aus dem:

Code: Alles auswählen

[/\<\/?video[^>]*\>/g]
dann

Code: Alles auswählen

[/</?video[^>]*>/g]
Die Backslash verschwinden beim Speichern und es funktioniert nicht.

in der tinymce.tpl.html habe ich es schon probiert, aber es wurde schinebar Nichts übernommen.

Code: Alles auswählen

<!-- contenido/external/wysiwyg/tinymce3/tinymce.tpl.html -->
<script src="{_PATH_CONTENIDO_FULLHTML_}scripts/con_tiny.js" type="text/javascript"></script>
<script src="{_PATH_CONTENIDO_FULLHTML_}external/wysiwyg/tinymce3/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
Con.Tiny.init({
    frontendPath: '{FRONTEND_PATH}',
    fileUrl: '{FILEBROWSER}',
    imageUrl: '{IMAGEBROWSER}',
    mediaUrl: '{MEDIABROWSER}',
    txtQuestion: '{QUESTION}'
});
</script>

<!-- Needs to be separate script tags! -->
<script language="JavaScript" type="text/javascript">
tinymce.init({
protect: [
    /\<\/?video[^>]*\>/g
],
    {CONFIG}
});
</script>
<!-- /tinyMCE -->
Ich habe den cache des Browsers geleert, neu eingeloggt, hat Nichts geholfen. Wo ist denn das zu finden was durch die Variable {CONFIG} eingebunden wird?

Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Mi 14. Jul 2021, 09:07

...Die Backslash verschwinden beim Speichern und es funktioniert nicht...
Das ist mir letztens auch aufgefallen, als ich einen Regulären Ausdruck für ein PIFA-Feld speichern wollte. Scheint also ein Bug zu sein, danke für die Info.
...Wo ist denn das zu finden was durch die Variable {CONFIG} eingebunden wird?...
Der Platzhalter "{CONFIG}" wird in der Datei contenido/external/wysiwyg/tinymce3/editorclass.php gesetzt, siehe folgende Zeile in der Funktion getEditor():

Code: Alles auswählen

        $template->set('s', 'CONFIG', $config);
Gruß
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Mi 14. Jul 2021, 09:22

Hallo, also ich bin jetzt ein Stückchen weiter.

Als ich den Ausdruck in der tinymce.tpl.html auf

Code: Alles auswählen

...tinymce.init({
	protect: [/\<\/?video[^>]*\>/g],
    {CONFIG}
});...
geändert habe (also die Leerzeichen weg), konnte ich den Ausdruck beim laden des Quelltextes im Backend im Editor (nach Klick auf den Editorbutten unter einm Textfeld) finden.

Code: Alles auswählen

<!-- Needs to be separate script tags! -->
<script language="JavaScript" type="text/javascript">
tinymce.init({
	protect: [/\<\/?video[^>]*\>/g],
    'extended_valid_elements': '*[*]',
	'valid_elements': '*[*]',
	'langid': '1',
	'clientid': '1',
Es funktioniert jetzt wenn ich im Artikel unter dem Textfeld auf den Editorbutton klicke, in den Edititor gelange und den video Abschnitt im HTML eingebe. Der Quellcode bleibt dann gleich.

Wo es noch nicht geht, ist, wenn ich in das Textfeld klicke, dann auf fullscreen, also den inside editor nutze, dann wird der Quelltext, wie zuvor sofort verändert.

Hat der Insideeditor ein anderes Template, denn hier finde ich es auch im Quelltext nicht.

Code: Alles auswählen

<script type="text/javascript">    
(function(Con, $) {

    // Configuration of tiny, when tiny is opened set event which stores original
    // content to Con.Tiny.editDataOrg
    var wysiwygSettings = {'extended_valid_elements': '*[*]',
	'valid_elements': '*[*]',
	'langid': '1',
	'clientid': '1',
Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Mi 14. Jul 2021, 21:29

Hallo larslunsen,

der TinyMCE im Fullscreen-Modus hat eine separate Konfiguration, das siehst du, wenn du dir den Quelltext der Seite anschaust. Die Initialisierung von TinyMCE hat eine separate Konfiguration mit der Bezeichnung "fullscreen_settings". Dies wird in folgenden Dateien mit dem Template-Platzhalter "TINY_OPTIONS" gesetzt:
- contenido/includes/include.con_content_list.php
- contenido/includes/include.con_editcontent.php

Die Templates dafür sind:
- contenido/templates/standard/template.con_content_list.html
- contenido/templates/standard/template.con_editcontent.html

Meiner Meinung nach müsstest du also die entsprechende Variable in den PHP-Skripten um die Ausnahme für Video-Tags erweitern.

Viel Erfolg und Grüße
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Do 15. Jul 2021, 08:42

Hallo xmurrix,

ich habe jetzt einige Stellen ausprobiert, aber keine hat funktioniert, um den Codeschnipsel

Code: Alles auswählen

protect: [/\<\/?video[^>]*\>/g],
in die Temlates zu integrieren. Ich denke meine Integrationsversuche sind fehlerhaft.

An dieser Stelle weiß ich nicht wie:

Code: Alles auswählen

var wysiwygSettings = {TINY_OPTIONS};
daraus wird ja dann:

Code: Alles auswählen

 var wysiwygSettings = {'extended_valid_elements': '*[*]',
	'valid_elements': '*[*]',
Hast dur eine Idee dazu.
in der Templatedatei im tinymce3 Ordner war es ja einfach mit:

Code: Alles auswählen

<script language="JavaScript" type="text/javascript">
tinymce.init({
	protect: [/\<\/?video[^>]*\>/g],
    {CONFIG}
});
</script>
Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Do 15. Jul 2021, 21:45

Hallo larslunsen,

in der Datei contenido/external/wysiwyg/tinymce3/editorclass.php gibt es die Funktion getConfigFullscreen() in der die Konfiguration für den TinyMCE im Fullscreen-Modus zusammengestellt wird. Ich habe testweise die letzte Zeile darin, in der der String für die Konfiguration zusammengestellt wird

Code: Alles auswählen

        $config .= "'plugins': '" . $this->_aSettings['plugins'] . "'\n";
in wie folgt erweitert

Code: Alles auswählen

        $config .= "'plugins': '" . $this->_aSettings['plugins'] . "',\n"; // Achtung, hier ist ein Komma vor \n
        $config .= "'protect': [/\<\/?video[^>]*\>/g]" . "'\n";
Damit wird die Konfiguration wie gewünscht ausgegeben und die Einstellung sollte im Fullscreen-Modus greifen. Du kannst also in der editorclass.php die entsprechenden Stellen erweitern. Das wäre die sauberere Variante, da man nur an einer Datei die Änderung macht.

Willst du das im Templates machen, so geht das erst nach der Zeile

Code: Alles auswählen

var wysiwygSettings = {TINY_OPTIONS};
also mit

Code: Alles auswählen

var wysiwygSettings = {TINY_OPTIONS};
wysiwygSettings.CMS_HTML.fullscreen_settings.protect = [/\<\/?video[^>]*\>/g];
Gruß
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Fr 16. Jul 2021, 08:28

Hallo, ich habe die Anpassung in der editorclass gemacht.

Mit deinen 2 Zeilen lief der inlineeditor garnicht mehr. Ich denke das ein Hochkomme vor [/\<\/?video[^>]*\...... fehlt. Also so:

Code: Alles auswählen

$config .= "'plugins': '" . $this->_aSettings['plugins'] . "',\n"; // Achtung, hier ist ein Komma vor \n
$config .= "'protect': '[/\<\/?video[^>]*\>/g]" . "'\n";
Oder?
Dann funktioniert der Editor , aber im Editor steht dann (voher war der videocode drin)

Code: Alles auswählen

tected e-->:protecte

%3C-->!--mc

tected e--&t;:protecte<-->-->p> d

%3C-->p>


<deo class="wh100 pos_abs" src="upload/video/video.mp4" playsinline="" poster="upload/video/video.jpg">
Habe ich was falsch gemacht?

Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Fr 16. Jul 2021, 09:22

...Habe ich was falsch gemacht?...
Könnte vielleicht ein Bug in TinyMCE3 sein, bei mir hat das gestern mit TinyMCE4 funktioniert. Der Code sieht gut aus.
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

lunsen_de
Beiträge: 238
Registriert: Mo 17. Okt 2005, 20:26
Wohnort: Weimar
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von lunsen_de » Fr 16. Jul 2021, 10:24

Hallo, ok, dann scheint es beim tiny3 nicht zu gehen.
Ich habe auch noch die 2. Variante gestestet und die beiden Templates modifiziert, aber auch hier führt es dazu, dass der Insideeditor nicht mehr funktioniert.

Im Quelltext sieht das dann so aus:

Code: Alles auswählen

..... 'plugins': 'table,save,advhr,advimage,advlink,pagebreak,style,layer,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups'

}};
	wysiwygSettings.CMS_HTML.fullscreen_settings.protect = [/\<\/?video[^>]*\>/g];

    // Initialize/setup TinyMCE editor
    Con.Tiny.tinymceInit(tinymce, wysiwygSettings, {
        saveTitle: 'Editor schließen und Änderungen speichern',
        saveImage: 'http://uft.webtects.de/contenido/images/but_save_tiny.gif',
        closeTitle: 'Editor schließen',
        closeImage: 'http://uft.webtects.de/contenido/images/but_close_tiny.gif',
        useTiny: '1',
        backendUrl: 'http://uft.webtects.de/contenido/'
    }); .......
Fehlen dann da noch ein init und ein paar Klammern, z.B.{ }?

Grüße larslunsen

xmurrix
Beiträge: 2991
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Problem Tinymce3 ändert Quelltext bei video

Beitrag von xmurrix » Fr 16. Jul 2021, 10:54

Ich denke da fehlt kein Init oder auch keine Klammern.

Die JavaScript-Variable "wysiwygSettings" ist ein Objekt, das die Einstellungen hat.
Wenn die Variable die Eigenschaft "CMS_HTML" und die wiederum die Eigenschaft "fullscreen_settings", dann kann man die wie folgt setzen:

Code: Alles auswählen

wysiwygSettings.CMS_HTML.fullscreen_settings.protect = [/\<\/?video[^>]*\>/g];
Du kannst ja mal testen, was da in der Variable wysiwygSettings genau steht.

Code: Alles auswählen

console.log(wysiwygSettings);
Auf der Stack Overflow Seite, in der das Problem auch beschrieben wird, steht folgendes drin:
It seems that TinyMCE 3 has some issues with this, to which TinyMCE 4 works fine.
Also scheint es hier ein Problem mit TinyMCE 3 zu geben.

Gruß
xmurrix
CONTENIDO downloads: CONTENIDO 4.10.1
CONTENIDO links: Documentation, API documentation
CONTENIDO @ Github: CONTENIDO 4.10

Antworten