In Alfresco 5 wird als WYSIWYG-Editor TinyMCE 4 in der vollen Ausbaustufe genutzt. Um die Übersichtlichkeit zu bewahren und in den Wiki-Einträgen bzw. Blog-Artikeln kein Durcheinander an Stilen zu erhalten kann dieser aber auch selbst konfiguriert, und wie in meinem Fall sinnvoll abgespeckt werden. Zusätzlich lässt sich das CSS für die Anzeige der Inhalte an die eigenen Bedürfnisse anpassen.

Hinweis: Mit Alfresco 5.0.c wurde unter anderem die Komponente für das externe publishen von Blog-Artikel (z.B. in einem WordPress-Blog) entfernt. Siehe dazu https://wiki.alfresco.com/wiki/Alfresco_Community_5.0.c_Release_Notes.

Wiki

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 umbennen 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,
toolbar: "styleselect | bold italic underline strikethrough sup sub | bullist numlist outdent indent | link unlink image | undo redo | fullscreen",
inline_styles: false,
style_formats: [
{title: "Headers", items: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
]},
{title: "Inline", items: [
{title:'Code-Inline', inline: 'span', classes : 'code'},
{title:'Zitat-Inline', inline: 'span', classes : 'cite'},
]},
{title: "Blocks", items: [
{title: "Paragraph", format: "p"},
{title:'Code', selector: 'p', classes : 'code'},
{title:'Zitat', selector: 'p', classes : 'cite'},
]}
],
content_css : "/share/themes/lightTheme/presentation.css",
extended_valid_elements : "style[type]",
valid_children : "+body[style]",
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 umbennen 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,
toolbar: "styleselect | bold italic underline strikethrough sup sub | bullist numlist outdent indent | link unlink image | undo redo | fullscreen",
inline_styles: false,
style_formats: [
{title: "Headers", items: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
]},
{title: "Inline", items: [
{title:'Code-Inline', inline: 'span', classes : 'code'},
{title:'Zitat-Inline', inline: 'span', classes : 'cite'},
]},
{title: "Blocks", items: [
{title: "Paragraph", format: "p"},
{title:'Code', selector: 'p', classes : 'code'},
{title:'Zitat', selector: 'p', classes : 'cite'},
]}
],
content_css : "/share/themes/lightTheme/presentation.css",
extended_valid_elements : "style[type]",
valid_children : "+body[style]",
siteId: this.options.siteId,
language: this.options.locale
});

Blog

Sichern Sie die Datei <alfresco>/tomcat/webapps/share/components/blog/postedit-min.js durch umbennen 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,
toolbar: "styleselect | bold italic underline strikethrough sup sub | bullist numlist outdent indent | link unlink image | undo redo | fullscreen",
inline_styles: false,
style_formats: [
{title: "Headers", items: [
{title: "Header 1", format: "h1"},
{title: "Header 2", format: "h2"},
{title: "Header 3", format: "h3"},
{title: "Header 4", format: "h4"},
]},
{title: "Inline", items: [
{title:'Code-Inline', inline: 'span', classes : 'code'},
{title:'Zitat-Inline', inline: 'span', classes : 'cite'},
]},
{title: "Blocks", items: [
{title: "Paragraph", format: "p"},
{title:'Code', selector: 'p', classes : 'code'},
{title:'Zitat', selector: 'p', classes : 'cite'},
]}
],
content_css : "/share/themes/lightTheme/presentation.css",
extended_valid_elements : "style[type]",
valid_children : "+body[style]",
siteId: this.options.siteId,
language: this.options.locale
});
this.widgets.editor.addPageUnloadBehaviour(this.msg("message.unsavedChanges.blog"));
this.widgets.editor.render();

lightTheme

Um das CSS im Editor bzw. für die Anzeige von Inhalten anzupassen, müssen Sie das CSS in der Datei <alfresco>/tomcat/webapps/share/themes/lightTheme/presentation.css anpassen bzw. ergänzen. Wenn Sie ein anderes Theme wie das lightTheme nutzen, muss im jeweiligen Theme-Ordner ebenfalls die Datei presentation.css angepasst werden.

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;
}