{"id":6808,"date":"2020-06-18T15:57:56","date_gmt":"2020-06-18T13:57:56","guid":{"rendered":"https:\/\/u-labs.de\/portal\/?p=6808"},"modified":"2020-06-18T15:57:57","modified_gmt":"2020-06-18T13:57:57","slug":"syntax-highlighting-fuer-weitere-sprachen-in-hcl-connections-6-5-tinymce-editor","status":"publish","type":"post","link":"https:\/\/u-labs.de\/portal\/syntax-highlighting-fuer-weitere-sprachen-in-hcl-connections-6-5-tinymce-editor\/","title":{"rendered":"Syntax-Highlighting f\u00fcr weitere Sprachen in HCL Connections 6.5 TinyMCE Editor"},"content":{"rendered":"

HCL Connections bietet mit TinyMCE einen modernen Editor, der auch Symtax-Hervorhebung f\u00fcr Programmcode unterst\u00fctzt. Dies ist sehr praktisch, um beispielsweise Dokumentationen in einem Wiki zu erstellen. Zur Hervorhebung wird die m\u00e4chtige quelloffene Bibliothek PrismJS<\/strong> verwendet. <\/p>\n

Deren Potenzial l\u00e4sst sich standardm\u00e4\u00dfig leider nicht nutzen: Ab Werk steht Syntax-Highlighting nur f\u00fcr C, C++, C#, Java, JavaScript, CSS, PHP, Python und Ruby angeboten. Dies sind zwar gebr\u00e4uchliche Sprachen. Doch in einem Wiki werden verschiedene Dinge dokumentiert: Mal ein Ausschnitt aus einem Dockerfile, eine Nginx Konfigurationsdirektive oder ein beispielhafter JSON-Datensatz. Bei Datenbanken k\u00f6nnte man eine SQL-Abfrage dokumentieren wollen. Je nach eingesetzter Technologie k\u00f6nnte man diese Liste noch deutlich weiter f\u00fchren. Daher ist hier in meinen Augen Vielf\u00e4ltigkeit wichtig und sinnvoll.<\/p>\n

Alle von PrismJS unterst\u00fctzten Sprachen nutzen<\/h2>\n

Wie m\u00e4chtig PrismJS ist, l\u00e4sst sich an der Zahl von unterst\u00fctzten Sprachen deutlich: \u00dcber 200 sind es an der Zahl, darunter auch alte Sprachen oder Exoten. Im Grunde muss nur die jeweilige Komponente geladen werden. Sie enth\u00e4lt Regeln und Muster, welche Codebestandteile wie hervorgehoben werden sollen. Leider l\u00e4dt Connections dies nur f\u00fcr die oben genannten Sprachen. Und es existiert derzeit keine offizielle M\u00f6glichkeit, um zus\u00e4tzliche Sprachen laden zu k\u00f6nnen. Allerdings kann man mit etwas Aufwand die JavaScript-Dateien entsprechend erweitern.<\/p>\n

Das Highlighting in Connections ist in zwei Teile aufgegliedert: Zum einen die Editor-Ansicht, w\u00e4hrend eine Wiki-Seite im Editor bearbeitet wird. Hier kommt direkt prism.js zum Einsatz. Zus\u00e4tzlich gibt es noch eine lesende Ansicht beim Aufruf eines Artikels, ohne den Bearbeiten-Knopf zu dr\u00fccken. <\/p>\n

Voraussetzungen und Vorbereitung<\/h3>\n

Komponenten f\u00fcr Sprachen herunterladen<\/h4>\n

Zun\u00e4chst m\u00fcssen wir die JavaScript-Dateien herunterladen, welche die Syntax-Regeln f\u00fcr die gew\u00fcnschte Sprache erhalten. Da Connections derzeit derzeit eine \u00e4ltere Version 1.18 einsetzt, sollten wir diese nicht direkt aus dem GitHub-Repository laden. Der dortige Stand entspricht bereits v1.20. Um Konflikte zu vermeiden empfehle ich, die Dateien der entsprechenden Version von einem CDN zu laden: Highlighting-Dateien f\u00fcr V1.18 auf JsDelivr<\/a>.<\/p>\n

Beispielhaft m\u00f6chten wir Docker zum Highlighting von Dockerfiles integrieren. Hierf\u00fcr laden wir die Datei prism-docker.js<\/strong> vom oben verlinkten CDN herunter. Ihr Inhalt muss sp\u00e4ter im TinyMCE-Bundle eingef\u00fcgt werden. <\/p>\n

Editor-JAR entpacken<\/h4>\n

Im Folgenden wird von einer Connections 6.5.1 Installation ausgegangen. TinyMCE ist bereits entsprechend der Dokumentation eingerichtet und aktiviert, sodass der Editor genutzt werden kann.<\/p>\n

Auf dem WebSphere-Server navigieren wir in ${PROVISION_PATH}\/webresources<\/strong>, um die Jar-Datei des TinyMCE-Editors zu entpacken. Im Folgenden Artikel wird hierf\u00fcr \/opt\/IBM\/shared\/provision\/webresources\/<\/strong> verwendet.<\/p>\n

cd \/opt\/IBM\/shared\/provision\/webresources\/\nunzip tiny.editors.connections_4.2.1.1.jar<\/code><\/pre>\n
Die JS-Dateien befinden sich nun im Unterordner resources<\/strong>, mit denen wir im Folgenden arbeiten werden.<\/p>\n
Lesende Ansicht ohne Editor<\/h3>\n
Die Datei resources\/render\/prism.js mit einem Texteditor \u00f6ffnen, etwa vim<\/strong><\/p>\n
vim resources\/render\/prism.js<\/code><\/pre>\n
und den Inhalt der heruntergeladenen JS-Datei prism-docker.js<\/strong> ans Ende einf\u00fcgen.<\/p>\n
Highlighting im Ediermodus des Editors<\/h3>\n
\u00d6ffne die Datei resources\/tinymce\/tinymce-bundle.min.js<\/strong> mit einem Texteditor (vim<\/strong>) und suche nach Prism.languages.csharp=<\/strong><\/p>\n
In vim dazu folgendes eintippen:<\/p>\n
\/Prism.languages.csharp=<\/code><\/pre>\n
Vor dieser Zeichenkette steht eine \u00f6ffnende, geschweifte Klammer {<\/strong>. Zwischen der Klammer und Prism.languages.csharp=<\/strong> muss der Inhalt der Komponente zum Highlighting eingef\u00fcgt werden. In diesem Beispiel also der Datei prism-docker.js<\/strong>. <\/p>\n
Neue Sprache im Editor anbieten<\/h3>\n
Nach diesen beiden \u00c4nderungen sind die Syntax-Regeln in Connections verf\u00fcgbar. Allerdings stehen diese dadurch nicht automatisch im Editor zur Auswahl, wenn man auf Codebeispiel<\/strong> klickt. Hierzu muss man die config.js<\/strong> Datei im Verzeichnis ${SHARED_DIRECTORY}\/customization\/javascript\/tiny\/editors\/connections<\/strong> bearbeiten.<\/p>\n
Mit dem Array externalPlugins k\u00f6nnen Plugins \u00fcberschrieben werden. Durch \u00dcberschreiben des Codesample-Plugins (verantwortlich f\u00fcr das Syntax-Highlighting) l\u00e4sst sich ein Array der zur Verf\u00fcgung stehenden Sprachen setzen. Dort inkludieren wir Docker.<\/p>\n
Beispiel:<\/p>\n
externalPlugins: [{\n    name: "codesample",\n    url: "\/connections\/resources\/web\/tiny.editors.connections\/tinymce\/plugins\/codesample\/plugin.min.js",\n    settings: {\n        codesample_global_prismjs: true,\n        codesample_languages: [\n            { text: 'C', value: 'c' },\n            { text: 'C#', value: 'csharp' },\n            { text: 'C++', value: 'cpp' },\n            { text: 'CSS', value: 'css' },\n            { text: 'Dockerfile', value: 'docker' },\n            { text: 'JavaScript', value: 'javascript' },\n            { text: 'Java', value: 'java' },\n            { text: 'PHP', value: 'php' },\n            { text: 'Python', value: 'python' },\n            { text: 'Ruby', value: 'ruby' },\n            { text: 'Ruby', value: 'ruby' }\n        ]\n    }\n }<\/code><\/pre>\n
Editor-Jar neu packen und Anwendungen neu starten<\/h3>\n
Damit die \u00c4nderungen an den JavaScript-Dateien von WebSphere geladen werden, muss man sie neu packen.<\/p>\n
sudo zip -r tiny.editors.connections_4.2.1.1.jar resources<\/code><\/pre>\n
Allerdings l\u00e4dt WebSphere diese Jar-Dateien nur beim Start. Daher ist ein Neustart der Common-Anwendung in der ISC notwendig. Dar\u00fcber hinaus auch jede Anwendung, worin der Editor verwendet wurde. Testet man beispielsweise in Wikis, muss also auch Wikis neu gestartet werden.<\/p>\n
Das neue Highlighting ist nicht nutzbar?<\/h2>\n
Wichtig zu wissen:<\/strong> Seit CR1 wird das Highlighting nicht mehr On-the-fly beim Laden der Seite generiert. Stattdessen scheint TinyMCE beim speichern PrismJS aufzurufen. Das generierte HTML zum Highlighting wird im Quelltext des Editors gespeichert. \u00c4nderungen in der lesenden Ansicht werden daher erst sichtbar, wenn man auf Bearbeiten klickt und die Seite erneut speichert!<\/p>\n","protected":false},"excerpt":{"rendered":"
HCL Connections bietet mit TinyMCE einen modernen Editor, der auch Symtax-Hervorhebung f\u00fcr Programmcode unterst\u00fctzt. Dies ist sehr praktisch, um beispielsweise Dokumentationen in einem Wiki zu erstellen. Zur Hervorhebung wird die m\u00e4chtige quelloffene Bibliothek PrismJS verwendet. Deren Potenzial l\u00e4sst sich standardm\u00e4\u00dfig leider nicht nutzen: Ab Werk steht Syntax-Highlighting nur f\u00fcr C, C++, C#, Java, JavaScript, CSS, …<\/p>\n","protected":false},"author":5,"featured_media":6811,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[765],"tags":[760,759,761],"class_list":["post-6808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hcl-connections","tag-hcl-connections","tag-ibm-connections","tag-tinymce"],"_links":{"self":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/comments?post=6808"}],"version-history":[{"count":4,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6808\/revisions"}],"predecessor-version":[{"id":6814,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/posts\/6808\/revisions\/6814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media\/6811"}],"wp:attachment":[{"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/media?parent=6808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/categories?post=6808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/u-labs.de\/portal\/wp-json\/wp\/v2\/tags?post=6808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}