Intrexx 8.0 Eigene styles dauerhaft im fckeditor.css verankern (TinyMCE)

[hdm-oba]

Hallo zusammen

Ich habe ein weiteres Problem mit dem Automatismen von Intrexx.
Wir haben mittels custom stylesheet einen Webfont eingebunden mittels @font-face...
Das Problem ist, dass im visuellen Editor (TinyMCE) die Einbindung des Web-Fonts sozusagen nicht existiert, da der Editor-Inhalt ja in einem Iframe geladen wird.
Das wäre an sich nicht so schlimm, da man ja die Datei fckeditor.css im Layout editieren kann. Das Problem ist jedoch, dass bei jedem veröffentlichen des Layouts diese Datei wieder neu von Intrexx modifiziert wird und somit meine Anpassung rausfliegt.
Hat jemand eine zündende Idee, wie ich im Editor die Einbindung des Webfonts realisieren kann? Die Schriftart selber ist ja zur Verwendung deklariert.

[hdm-oba]

Einen theoretischen Lösungsansatz habe ich: Mittels Plugin im Editor die entsprechenden Anweisungen nachladen.

[MartinW]

Evtl. genügt es dann auch im Layout die Benutzerdefinierten Styles zu verändern?

[hdm-oba]

Im Layout ist in den benutzerdefinierten Styles bzw. Web-Font-Deklarationen ja entsprechend vorhanden, aber im Editor selber sind die Styles nicht geladen, weil dort letztendlich ein IFrame platziert wird, welches die benutzerdefinierten Styles nicht lädt. Stattdessen wird ein "Eigengebräu" geladen, welches Intrexx automatisch aus Versatzstücken der eigenen Styles generiert. @Font-Face-Deklarationen sind leider nicht dabei.

[hdm-oba]

Ich habe jetzt eine pluginbasierte Lösung entwickelt, die halbwegs upgrade-sicher sein sollte. Leider noch nicht 100%ig perfekt, da man für jedes Editor-Feld noch in den Expertenatrributen angeben muss, dass das Plugin geladen werden soll.


Schritt 1:
Ein neues Plugin, also einen neuen Ordner im Pfad
C:\ProgramData\intrexx\portal\external\htmlroot\th irdparty\tinymce\js\tinymce\plugins\ erstellen.
In meinem Beispiel heisst der Ordner webfontload.

Im Plugin-Verzeichnis gibt es nur zwei JS-Dateien, die letztendlich den gleichen Inhalt haben. Die min-Version ist halt nur ohne Zeichenumbrüche, Spaces oder Kommentare um Ladezeit bzw. Datentransfer zu sparen. Die Dateien sind dazu da, um ein eigenes CSS-File (zum Speicherort später) zu laden, welches benötigt wird, um die Web Fonts oder weitere Styles zu laden. Wer will, kann auch direkt auf einen CDN verweisen (z.B. https://fonts.googleapis.com/css?family=Open+Sans) und hätte dann damit den Job fast erledigt.

plugin.js

/**
 * plugin.js
 *
 * Released under LGPL License.
 */

/*global tinymce:true */

tinymce.PluginManager.add('webfontload', function(editor) {

    editor.on('init', function (e) {

        var hdm_tinymce_editors = document.getElementsByClassName("mce-edit-area");
        for (var i = 0; i < hdm_tinymce_editors.length; i++) {
            var hdm_tinymce_editor_iframe = hdm_tinymce_editors[i].getElementsByTagName("iframe");
            for (var j = 0; j < hdm_tinymce_editor_iframe.length; j++) {
                with(hdm_tinymce_editor_iframe[j].contentWindow) {
                    var h=document.getElementsByTagName("head");
                    var newStyleSheet=document.createElement("link");
                    newStyleSheet.rel="stylesheet";
                    newStyleSheet.href="css/hdm-tinymce/webfont.css";
                    h[0].appendChild(newStyleSheet);
               }  
            }  
        }
    });
});

plugin.min.js

tinymce.PluginManager.add('webfontload', function(editor) { editor.on('init', function (e) {  var hdm_tinymce_editors = document.getElementsByClassName("mce-edit-area"); for (var i = 0; i < hdm_tinymce_editors.length; i++) { var hdm_tinymce_editor_iframe = hdm_tinymce_editors[i].getElementsByTagName("iframe"); for (var j = 0; j < hdm_tinymce_editor_iframe.length; j++) { with(hdm_tinymce_editor_iframe[j].contentWindow) { var h=document.getElementsByTagName("head"); var newStyleSheet=document.createElement("link"); newStyleSheet.rel="stylesheet"; newStyleSheet.href="css/hdm-tinymce/webfont.css"; h[0].appendChild(newStyleSheet); } } }}); });

Die CSS-Dateien auf die verwiesen wird, befindet sich an einem anderen Ort und zwar:
C:\ProgramData\intrexx\portal\external\htmlroot\cs s
In meinem Beispiel habe ich in diesem Pfad einen Ordner "hdm-tinymce" erstellt.

Dort liegt das eigentliche Stylesheet (webfont.css), in welcher letztendlich jenes CSS enthalten, welches ich dauerhaft im TinyMCE zusätzlich haben möchte - hier eben die Einbindung des Webfonts und damit relativ simpel.

webfont.css:

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
    url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
    url('fonts/OpenSans-Regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Die Fonts liegen in einem Unterordner am Ort der CSS-Datei, hier also
C:\ProgramData\intrexx\portal\external\htmlroot\cs s\hdm-tinymce\fonts

Die Vorbereitungen sind damit erledigt. Damit das Plugin jeweils geladen wird, muss in den Expertenattributen jeder Editor-Einbindung noch webfontload im Attribut
"tiny-additional-plugins" hinzugefügt werden.

[MT Moysies]

Hallo zusammen,

ich bin auf dasselbe Problem gestoßen, habe aber für meine Zwecke eine einfachere Lösung gefunden. Hintergrund: Für die Dokumentenerzeugung in Intrexx sollen Texte formattierte eingegeben werden, die die Schriftart Arial Narrow in LibreOffice benutzen. Diese ist jedoch nicht im TinyMCE standardmäßig vorhanden.

Lösung: Im Textfeld in Intrexx unter Optionen (wenn TinyMCE ausgewählt ist) auf den Stft klicken. Dort kommt man dann direkt zu den init-Kommandos des Editors. Beispiel ist im Screenshot enthalten.

United Planet es wäre schön, wenn dieser Hinweis/Weg mit in die Onlinehilfe aufgenommen werden könnte!