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