blog.bartlweb - a technologist's external brain

TinyMCE in Alfresco 3.3 an die eigenen Bedürfnisse anpassen

Alfresco liefert seit Version 3.2 als Standard-Editor den mächtigen TinyMCE in vollem Funktionsumfang mit. Um diesen für den Blog bzw. für die Wiki sinnvoll zu konfigurieren und die Standardstyles an eigene Bedürfnisse anzupassen, folgen Sie der unteren Anleitung.

Blog

Gehen Sie im Installationsverzeichnis (meist /opt/Alfresco) in den Ordner tomcat/webapps/share/components/blog und kopieren Sie die Datei postedit-min.js nach postedit-min.js.old, sowie die Datei postedit.js nach postedit-min.js. Nun bearbeiten Sie die die Datei postedit-min.js und suchen Sie nach der Kommentarzeile // Instantiate the simple editor we use for the form und ersetzen Sie den darunter liegenden Code für Konfiguration und Aufruf von TinyMCE durch den folgenden:

this.widgets.editor = Alfresco.util.RichEditor(Alfresco.constants.HTML_EDITOR,this.id + '-content',
{
height: 400,
width: 800,
theme: "advanced",
plugins: "table,visualchars,emotions,advhr,print,directionality,fullscreen,insertdatetime",
content_css : "/share/themes/default/presentation.css",
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_path : false,
theme_advanced_resizing: true,
siteId: this.options.siteId,
language:this.options.locale,
convert_fonts_to_spans:false,
inline_styles:false
});
this.widgets.editor.addPageUnloadBehaviour(this.msg("message.unsavedChanges.blog"));
this.widgets.editor.render();

Wiki

Gehen Sie im Installationsverzeichnis (meist /opt/Alfresco) in den Ordner tomcat/webapps/share/components/wiki und kopieren Sie die Datei page-min.js nach page-min.js.old, sowie die Datei page.js nach page-min.js. Nun bearbeiten Sie die die Datei page-min.js und suchen Sie nach der Kommentarzeile //Tiny MCE und ersetzen Sie den darunter liegenden Code für Konfiguration und Aufruf von TinyMCE durch den folgenden:

this.pageEditor = Alfresco.util.createImageEditor(this.id + '-content',
{
height: 400,
width: 800,
theme: "advanced",
plugins: "table,visualchars,emotions,advhr,print,directionality,fullscreen,insertdatetime",
content_css : "/share/themes/default/presentation.css",
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_path : false,
theme_advanced_resizing: true,
siteId: this.options.siteId,
language:this.options.locale,
convert_fonts_to_spans:false,
inline_styles:false
});
this.pageEditor.addPageUnloadBehaviour(this.msg("message.unsavedChanges.wiki"));
this.pageEditor.render();

Nun kopieren Sie die Datei createform-min.js nach createform-min.js.old, sowie die Datei createform.js nach createform-min.js. Bearbeiten Sie die die Datei createform-min.js und suchen Sie nach der Kommentarzeile //Tiny MCE und ersetzen Sie den darunter liegenden Code durch den folgenden.

this.widgets.editor = Alfresco.util.createImageEditor(this.id + '-content',
{
height: 400,
width: 800,
theme: "advanced",
plugins: "table,visualchars,emotions,advhr,print,directionality,fullscreen,insertdatetime",
content_css : "/share/themes/default/presentation.css",
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_path : false,
theme_advanced_resizing: true,
siteId: this.options.siteId,
language:this.options.locale,
convert_fonts_to_spans:false,
inline_styles:false
});

CSS-Styles anpassen und neu definieren

Oben haben wir den Editor soweit angepasst, dass nun Überschriften von H1-H4, sowie Absätze und Span-Tags für die Auszeichnung von Code und Zitaten möglich sind. Um nun eine grundlegende Styleanpassung dieser Elemente durchzuführen ergänzen Sie die CSS-Datei unter tomcat/webapps/share/themes/default/presentation.css im Installationsverzeichnis von Alfresco um z.B. das untenstehenden Beispiel-CSS.

p {
padding:0;
margin:0;
margin-bottom: 15px;
font-size: 13px;
}
 
p.code, span.code {
font-family: Courier;
}
 
p.code {
border: 1px dotted #CCCCCC;
background-color: #F0F0F0;
padding: 10px;
margin-left: 10px;
}
 
p.cite, span.cite {
font-style: italic;
}
 
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 {
margin: 0;
padding: 0;
margin-bottom: 5px;
padding-top: 20px;
border-bottom: 1px dotted #515D6B;
}
 
.rich-content h2, #tinymce h2, .postview .content h2 {
margin: 0;
padding: 0;
margin-bottom: 5px;
padding-top: 15px;
}
 
.rich-content h3, #tinymce h3, .postview .content h3 {
margin: 0;
padding: 0;
margin-bottom: 3px;
padding-top: 15px;
}
 
.rich-content h4, #tinymce h4, .postview .content h4 {
margin: 0;
padding: 0;
margin-bottom: 3px;
padding-top: 10px;
font-size: 90%;
font-weight: bold;
}

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 "9160" ein, nur dann kann ich deinen Kommentar entgegennehmen.

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