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