Alfresco hat nicht nur das Namensschema seiner neuen Community Edition Releases verändert, sondern auch etwas am JavaScript der Editoren verändert, bzw. auf die aktuelle Version von TinyMCE umgestellt, weshalb meine Anpassungen und Optimierungen am Editor nicht so einfach vom alten Release übernommen werden können. Daher gibt es eine neue Upgrade-Anleitung inkl. aktualisierten Code-Anpassungen für die Adaptierung des Wiki- und Blog-Editors.

Alfresco neu installieren und konfigurieren

Installieren Sie Alfresco über den Installationsassistenten in ein neues Verzeichnis, um das aktuelle Installation unangetastet zu lassen und die Daten später übernehmen zu können. Damit die parallele Installation einwandfrei klappt, müssen Sie drei Punkte beachten:

• Stoppen Sie alle Dienste der aktuellen Alfresco-Installation mit dem Befehl /etc/init.d/alfresco stop.
• Löschen Sie die init.d-Datei (rm /etc/init.d/alfresco) ansonsten wird diese vom Installer nicht überschrieben und damit auch die zahlreichen Verzeichnisangaben darin nicht auf die neue Installation gesetzt.
• Geben Sie bei der Installation ein Adminpasswort ohne Sonderzeichen an, sonst schlägt die Installation fehl (Es darf in diesem Fall auch ein ganz simples sein, da dieses beim Wiederherstellen der Datenbank aus der alten Installation mit dem bisher gesetzten überschrieben wird).

Nach der Installation können Sie die Konfiguration von Alfresco unter /opt/alfresco-community/tomcat/shared/classes/alfresco-global.properties entsprechend Ihren Vorgaben anpassen. In meinem Fall musste ich bisher eigentlich immer nur die Konfiguration des Mailrelays für den Versand von Mails ergänzen:

### Mail Server ###
mail.host = 192.168.0.254
mail.port = 25
mail.smtp.auth = false
mail.encoding = UTF-8
mail.from.default = alfresco@bartlweb.net

Daten aus der alten Installation übernehmen

Datenbank kopieren

Die detaillierte Anleitung, in der auch erklärt wird, wie die alte Installation gesichert wird, finden Sie im Artikel: Upgrade von Alfresco PostgreSQL-Bundle

Damit das Einspielen der Sicherung in die Datenbank der neuen Installation klappt, muss zunächst ein Passwort (für die zukünftige Wartung notieren oder merken) für den Nutzer postgres mit dem folgenden Befehl gesetzt werden:

sudo passwd postgres

Dann kann die leere Datenbank der neuen Installation durch das Backup der alten ersetzt werden.

/opt/alfresco-community/postgresql/bin/dropdb alfresco -h localhost -i - U postgres
/opt/alfresco-community/postgresql/bin/createdb -T template0 alfresco -h localhost -U postgres
/opt/alfresco-community/postgresql/bin/psql alfresco -h localhost < /tmp/alfrescodb -U postgres

Daten kopieren

Nachdem nun die Datenbank wieder eingespielt ist, müssen Sie noch den Inhalt von alf_data aus der alten Installation in die Neue kopieren. Kopieren Sie dazu alle Ordner, bis auf postgresql und solr, also contentstore, contentstore.deleted, keystore und falls vorhanden oouser!

Konfiguration der Editoren

Ich habe die Editoren von TinyMCE angepasst - vor allem abgespeckt, um diese übersichtlicher zu machen - und um eigene Styles ergänzt.

Editor für Wiki optimieren

Im Wiki gibt es für die Anzeige des Editors beim Erstellen einer neuen Seite und für das Bearbeiten einer bestehenden Seite zwei unterschiedliche JavaScript-Dateien, die beide angepasst werden müssen.

page.js

Sichern Sie die Datei <alfresco>/tomcat/webapps/share/components/wiki/page-min.js durch umbenennen und kopieren Sie im selben Verzeichnis die Datei page.js nach page-min.js. Ersetzen Sie nun das JavaScript für den Aufruf des Editors in der Datei page-min.js durch den folgenden Code.

// TinyMCE
var me = this;
this.pageEditor = Alfresco.util.createImageEditor(this.id + '-content',
{
    height: 400,
    resize: true,
    toolbar: "formatselect styleselect | removeformat pastetext | bold italic underline strikethrough sup sub | alignleft aligncenter alignright | bullist numlist outdent indent | link unlink | charmap alfresco-imagelibrary alfresco-linklibrary | code fullscreen",
    extended_valid_elements : "style[type]",
    valid_children : "+body[style]",
    block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4',
    content_css : "/share/themes/lightTheme/presentation.css",
    style_formats:[
        {title:'Sourcecode', selector: 'p', classes : 'code'},
        {title:'Sourcecode-Inline', inline: 'span', classes : 'code'},
        {title:'Zitat', selector: 'p', classes : 'cite'},
        {title:'Zitat-Inline', inline: 'span', classes : 'cite'},
    ],
    siteId: this.options.siteId,
    language: this.options.locale,
    init_instance_callback: function(o) {
       // must fire the "editorInitialized" as that is what the default init_instance_callback behaviour would do
       YAHOO.Bubbling.fire("editorInitialized", o);
       // save key behaviour - stop the outer document event and save the Wiki form
       me.pageEditor.addSaveKeyBehaviour(function(id, e) {
          Event.stopEvent(e[1]);
          saveButton.fireEvent('click', {
             type: 'click'
          });
       });
    }
});
this.pageEditor.addPageUnloadBehaviour(this.msg("message.unsavedChanges.wiki"));
this.pageEditor.render();

createform.js

Sichern Sie die Datei <alfresco>/tomcat/webapps/share/components/wiki/createform-min.js durch umbenennen und kopieren Sie im selben Verzeichnis die Datei createform.js nach createform-min.js. Ersetzen Sie nun das JavaScript für den Aufruf des Editors in der Datei createform-min.js durch den folgenden Code.

// TinyMCE
this.widgets.editor = Alfresco.util.createImageEditor(this.id + '-content',
{
    height: 400,
    resize: true,
    toolbar: "formatselect styleselect | removeformat pastetext | bold italic underline strikethrough sup sub | alignleft aligncenter alignright | bullist numlist outdent indent | link unlink | charmap alfresco-imagelibrary alfresco-linklibrary | code fullscreen",
    extended_valid_elements : "style[type]",
    valid_children : "+body[style]",
    block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4',
    content_css : "/share/themes/lightTheme/presentation.css",
    style_formats:[
        {title:'Sourcecode', selector: 'p', classes : 'code'},
        {title:'Sourcecode-Inline', inline: 'span', classes : 'code'},
        {title:'Zitat', selector: 'p', classes : 'cite'},
        {title:'Zitat-Inline', inline: 'span', classes : 'cite'},
    ],
    siteId: this.options.siteId,
    language: this.options.locale,
});

Editor für Blog optimieren

Sichern Sie die Datei <alfresco>/tomcat/webapps/share/components/blog/postedit-min.js durch umbenennen und kopieren Sie im selben Verzeichnis die Datei postedit.js nach postedit-min.js. Ersetzen Sie nun das JavaScript für den Aufruf des Editors in der Datei postedit-min.js durch den folgenden Code.

// Instantiate the simple editor we use for the form
this.widgets.editor = Alfresco.util.RichEditor(Alfresco.constants.HTML_EDITOR,this.id + '-content',
{
    height: 400,
    resize: true,
    toolbar: "formatselect styleselect | removeformat pastetext | bold italic underline strikethrough sup sub | alignleft aligncenter alignright | bullist numlist outdent indent | link unlink | charmap alfresco-imagelibrary alfresco-linklibrary | code fullscreen",
    extended_valid_elements : "style[type]",
    valid_children : "+body[style]",
    block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4',
    content_css : "/share/themes/lightTheme/presentation.css",
    style_formats:[
        {title:'Sourcecode', selector: 'p', classes : 'code'},
        {title:'Sourcecode-Inline', inline: 'span', classes : 'code'},
        {title:'Zitat', selector: 'p', classes : 'cite'},
        {title:'Zitat-Inline', inline: 'span', classes : 'cite'},
    ],
    siteId: this.options.siteId,
    language: this.options.locale,
});
this.widgets.editor.addPageUnloadBehaviour(this.msg("message.unsavedChanges.blog"));
this.widgets.editor.render();

CSS-Anpassungen lightTheme

Das untere CSS wir am Ende der Datei <alfresco>/tomcat/webapps/share/themes/default/presentation.css und der Datei <alfresco>/tomcat/webapps/share/themes/lightTheme/presentation.css eingefügt.

p, .alfresco-share .sticky-wrapper p, .yui-overlay p {
padding:0;
margin:0;
margin-bottom: 15px;
font-size: 13px;
}
 
p.code, span.code {
font-family: Courier;
}
 
p.code, .alfresco-share .sticky-wrapper p.code, .yui-panel-container p.code {
border: 1px dotted #CCCCCC;
background-color: #F0F0F0;
padding: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
 
p.cite, span.cite {
font-style: italic;
}
 
p.cite, .alfresco-share .sticky-wrapper p.cite, .yui-panel-container p.cite {
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-left: 1px dotted #777777;
background-color: #F0F0F0;
}
 
p.cite, p.code {
overflow: auto;
}
 
li {
font-size: 13px;
}
 
.rich-content ul, #tinymce ul, .rich-content ol, #tinymce ol, .postview .content ul, .postview .content ol {
padding: 0;
padding-left: 1em;
margin-bottom: 15px;
}
 
.rich-content h1, #tinymce h1, .postview .content h1, .wiki-page .rich-content h1, .wiki h1 {
margin: 0;
padding: 0;
margin-bottom: 5px;
padding-top: 20px !important;
border-bottom: 1px dotted #515D6B;
line-height: 1em;
}
 
.rich-content h2, #tinymce h2, .postview .content h2, .wiki-page .rich-content h2, .wiki h2 {
margin: 0;
padding: 0;
margin-bottom: 5px;
padding-top: 15px;
line-height: 1em;
}
 
.rich-content h3, #tinymce h3, .postview .content h3, .wiki-page .rich-content h3, .wiki h3 {
margin: 0;
padding: 0;
margin-bottom: 3px;
padding-top: 15px;
line-height: 1em;
}
 
.rich-content h4, #tinymce h4, .postview .content h4, .wiki-page .rich-content h4, .wiki h4 {
margin: 0;
padding: 0;
margin-bottom: 3px;
padding-top: 10px;
font-size: 90%;
font-weight: bold;
lne-height: 1em;
}
 
.alfresco-share .sticky-wrapper .wiki-page .rich-content, .alfresco-share .sticky-wrapper .wiki {
    font-size: 1em !important;
}
 
#tinymce p {
    font-size: 13px;
}
 
.sticky-wrapper h1, .yui-overlay h1 {
    font-size: 190% !important;
}