blog.bartlweb - a technologist's external brain

TinyMCE in Alfresco Share 3.1 integrieren

Diese Anleitung beschreibt alle notwendigen Schritte um den YUI-Editor zum bearbeiten Wiki-Seiten und zum Erstellen bzw Editieren von Blogeinträgen gegen TinyMCE zu tauschen. Alle weiteren Editoren zum Anlegen von Kommentaren werden dadurch nicht getauscht.

Vorteile

  • Überschriften definierbar
  • mehr Möglichkeiten
  • bessere Benutzbarkeit

Einschränkungen

  • Alfresco entfernt beim Abspeichern leider diverse Tags (pre, code) -> um dies zu umgehen können aber benutzerdefinierte Styles definiert werden die dann auf p oder span-Tags angewendet werden können.

Umsetzung

1) TinyMCE Sources kopieren

Laden Sie die aktuelle Version von TinyMCE herunter und kopieren sie den Ordner “/jscripts/tiny_mce” nach “/opt/Alfresco/tomcat/webapps/share/js”

2) init.js erstellen

TinyMCE benötigt einen init-Aufruf mit übergabe der benutzerdefinierten Konfiguration. Für die Verwendung in Alfresco definieren wir diesen Konfiguration Global und kapseln den Aufruf in eine eigene Funktion.

Erstellen Sie dazu unter “/opt/Alfresco/tomcat/webapps/share/js/tiny_mce” die Datei init.js mit folgendem Inhalt:

function loadTinyMCE() {
  tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,style,table,advimage,advlink,iespell,inlinepopups,insertdatetime,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking",
    content_css : "/share/themes/default/presentation.css",
    // Theme options
    theme_advanced_buttons1 : "formatselect,styleselect,|, bold,italic,underline,strikethrough,sup,sub,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,outdent,indent,|,forecolor,backcolor",
    theme_advanced_buttons2 : "undo,redo,|,link,unlink,|,image,|,charmap,insertdate,inserttime,|,removeformat,cleanup,code,pasteword,|,fullscreen",
    theme_advanced_buttons3 : "",
    theme_advanced_blockformats : "p,h1,h2,h3,h4",
    theme_advanced_styles : "Code=code;Zitat=cite",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true, preformatted : true,
    width : 800,
    height : 400;
  });
}

3) JavaScript Dateien in den Header der entsprechenden Seiten einfügen

Fügen Sie dazu folgende 2 Zeilen in den HTML-Header der unten gelisteten Templates ein.

<script type="text/javascript" src="${url.context}/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="${url.context}/js/tiny_mce/init.js"></script>
  • /opt/Alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/templates/org/alfresco/wiki-page.ftl
  • /opt/Alfresco/tomcat/webapps/share/WEB-INF/classes/alfresco/templates/org/alfresco/blog-postedit.ftl

4) JavaScript der betreffenden Seiten umschreiben

Wiki-Page

editieren Sie "/opt/Alfresco/tomcat/webapps/share/components/wiki/wiki.js":

Zeile 337: "this.pageEditor.render();" durch folgenden Code ersetzen:

loadTinyMCE();

Zeile 440: "this.pageEditor.saveHTML();" durch folgenden Code ersetzen:

var iframe = document.getElementById(this.id + "-pagecontent_ifr");
var html = iframe.contentWindow.document.body.innerHTML;
document.getElementById(this.id + "-pagecontent").value = html;
Blog-Postedit

editieren Sie “/opt/Alfresco/tomcat/webapps/share/components/blog/postedit.js”:

Zeile 354: "this.pageEditor.render();" durch folgenden Code ersetzen:

loadTinyMCE();

Zeile 371: auskommentieren von  "this.widgets.postForm.addValidation(this.id + "-content", Alfresco.forms.validation.mandatory, null);"

Zeile 406: "this.widgets.editor..saveHTML();" durch folgenden Code ersetzen:

var iframe = document.getElementById(this.id + "-content_ifr");
var html = iframe.contentWindow.document.body.innerHTML;
document.getElementById(this.id + "-content").value = html;

5) benutzerdefiniertes CSS

definieren Sie unter "/opt/Alfresco/tomcat/webapps/share/themes/default/presentation.css" folgende Styles:

  • H1 – H6
  • p.code, span.code
  • p.cite, span.cite
  • eventuell auch p, ul, ol

Beachten Sie die Definitionen nur für den Editor und die Ausgabe in Blog und Wiki gültig zu machen:

  • für Editor: #tinymce
  • für Wiki-Seite: .wiki-page .rich-content
  • für Blog-Ausgabe: .post .content

Dieser Artikel hat dir deinen Tag gerettet?
... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? ... oder einfach nur dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Spende honorierst:

Kommentare

Noch kein Kommentar vorhanden.
Sei der Erste - ich freue mich über deine Anmerkungen, Kritik und Fragen.

Kommentar schreiben

Deine E-Mailadresse wird nur für Benachrichtigungen und Rückfragen verwendet und wird nicht veröffentlicht.

Benachrichtigungen können jederzeit wieder abbestellt werden.

Bitte tippe die Zahlenkombination "1098" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.