blog.bartlweb - a technologist's external brain

TinyMCE unter Alfresco 5 anpassen

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

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 Anerkennung honorierst:

Zahlung mit PayPal oder Kreditkarte.

Hinweis zur Verwendung

Die Übermittlung einer Zahlung ist eine persönliche Anerkennung Ihrerseits an den Entwickler (Christian Bartl, Privatperson). Eine Zahlung ist nicht zweckgebunden und es ist keine Gegenleistung zu erwarten. Bitte beachten Sie, dass für eine übermittelte Zahlung keine Quittung ausgestellt werden kann.

Über den Autor

Christian Bartl

Christian Bartl Requirements Engineer
& Solution Architect für Online und Mobile

Als Technologie-Enthusiast und begeisterter Programmierer entwickle ich in meiner Freizeit Websites, Software und IT-Lösungen, die mir selbst und anderen den Alltag vereinfachen.

mehr auf christian.bartl.me

Kommentare

Noch kein Kommentar vorhanden.
Sei der Erste! - Ich freue mich über deine Anmerkung, Kritik oder Frage.

Kommentar schreiben

Der hier angegebene Name wird gemeinsam mit deinem Kommentar auf der Website veröffentlicht.

Deine E-Mail-Adresse wird zur einmaligen Benachrichtigung bei Veröffentlichung des Kommentars genutzt.

Benachrichtigung per E-Mail über Antworten auf meinen Kommentar erhalten.

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

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