Uniformiser le RTE dans les différents modules Share

Deux éditeurs de texte riche sont inclus dans Alfresco Share :

  • Editeur TinyMCE : utilisé pour le module Wiki
  • Editeur YUI : utilisé pour les modules Discussions, Blog et la saisie des commentaires.

L'éditeur TinyMCE dispose d'une palette de fonctionnalités plus large, notamment les sélecteurs de fichiers et d'images de la bibliothèque de documents. Il est ainsi possible de personnaliser Alfresco Share pour utiliser le même éditeur de texte riche pour les différents modules et ainsi proposer aux utilisateurs les mêmes fonctionnalités quelque-soit le module.

Pour cela, il faut pour la version Alfresco 4.1.x recopier les fichiers suivants présents dans TOMCAT_HOME/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components :

  • blog/postedit.get.head.ftl
  • blog/postedit.get.html.ftl
  • discussions/createtopic.get.head.ftl
  • discussions/createtopic.get.html.ftl

Et les placer dans TOMCAT_HOME/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components.

Ensuite, il faut dans les fichiers postedit.get.head.ftl et createtopic.get.head.ftl ajouter les imports nécessaires pour utiliser TinyMCE :

<@script type="text/javascript" src="${page.url.context}/res/modules/document-picker/document-picker.js"></@script>
<@script type="text/javascript" src="${page.url.context}/res/components/object-finder/object-finder.js"></@script>

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/modules/document-picker/document-picker.css" />
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/object-finder/object-finder.css" />

<!-- Simple Editor -->
<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/modules/simple-editor.css" />
<@script type="text/javascript" src="${page.url.context}/res/modules/simple-editor.js"></@script>

Puis dans les fichiers postedit.get.html.ftl et createtopic.get.html.ftl, il faut définir les paramètres de configuration (en remplaçant les paramètres existants) :

editorConfig:
{
   width: "700",
   height: "300",
   inline_styles: false,
   convert_fonts_to_spans: false,
   theme: "advanced",
   plugins: "table,visualchars,emotions,advhr,print,directionality,fullscreen,insertdatetime",
   theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,forecolor",
   theme_advanced_buttons2: "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,alfresco-imagelibrary,alfresco-linklibrary,image,cleanup,help,code,removeformat,|,insertdate,inserttime",
   theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,advhr,|,print,|,ltr,rtl,|,fullscreen",
   theme_advanced_toolbar_location : "top",
   theme_advanced_toolbar_align : "left",
   theme_advanced_statusbar_location : "bottom",
   theme_advanced_path : false,
   theme_advanced_resizing : true,
   theme_advanced_default_foreground_color : "#000000",
   extended_valid_elements : "style[type]",
   valid_children : "+body[style]",
   siteId: "${page.url.templateArgs["site"]!""}",
   language: "${locale?substring(0, 2)?js_string}"
},

Enfin, il est nécessaire de modifier les fichiers suivants afin de changer l'instanciation de l'éditeur de texte riche :

  • TOMCAT_HOME/webapps/share/components/blog/postedit.js
  • TOMCAT_HOME/webapps/share/components/discussions/createtopic.js

Dans ces deux fichiers, remplacer la ligne suivante :

this.widgets.editor = new Alfresco.util.RichEditor(Alfresco.constants.HTML_EDITOR, this.id + "-content", this.options.editorConfig);

Par cette ligne :

this.widgets.editor = Alfresco.util.createImageEditor(this.id + '-content', this.options.editorConfig);

Une fois ces modifications apportées, il faut encore minifier ces deux fichiers.

Catégorie: