How to I18N PrimeFaces Editor - jsf-2

Question

I cannot work out how to add internationalization to the PrimeFaces Editor (Version 3.2).
I need to translate tooltips, texts in comboboxes and change icons of the toolbar.
In an old users guide http://www.scribd.com/doc/49595285/46/Editor I found an attribute called "language" but this seems to be kind of disabled or removed for the actual version.
My project setup is JSF 2 with PrimeFaces 3.2 and GlassFish 3.1.2
I'd be very glad if you could show me how I can solve this problem.
Thanks and Kind regards,
Pedro

Answer 1

JMelnik is right. There is a workaround though!
You can do that by downloading the editor.js file from the primefaces subversion repository: 3_3_1/src/main/resources/META-INF/resources/primefaces/editor/editor.js and place it inside your project's META-INF/resources/primefaces/editor folder.
Now you can edit the file and change it according to you locale. I did it for some of the buttons in pt_BR:
buttons: {
// name,title,command,popupName (""=use name)
init:
"bold,Negrito,|" +
"italic,Itálico,|" +
"underline,Sublinhado,|" +
"strikethrough,Tachado,|" +
"subscript,Subscrito,|" +
"superscript,Sobrescrito,|" +
"font,Fonte,fontname,|" +
"size,Tamanho da Fonte,fontsize,|" +
"style,Estilo,formatblock,|" +
"color,Cor da fonte,forecolor,|" +
"highlight,Cor de Destaque do Texto,hilitecolor,color|" +
"removeformat,Remove Formatting,|" +
"bullets,Marcadores,insertunorderedlist|" +
"numbering,Numeração,insertorderedlist|" +
"outdent,Diminuir Recuo,|" +
"indent,Aumentar Recuo,|" +
"alignleft,Alinhar à Esquerda,justifyleft|" +
"center,Centralizar,justifycenter|" +
"alignright,Alinhar à Direita,justifyright|" +
"justify,Justificar,justifyfull|" +
"undo,,|" +
"redo,,|" +
"rule,Insert Horizontal Rule,inserthorizontalrule|" +
"image,Insert Image,insertimage,url|" +
"link,Insert Hyperlink,createlink,url|" +
"unlink,Remove Hyperlink,|" +
"cut,,|" +
"copy,,|" +
"paste,,|" +
"pastetext,Paste as Text,inserthtml,|" +
"print,,|" +
"source,Mostrar Código Fonte"
},
A i18n solution for that would be great since this approach won't support multiple locales and make you code depend on specific encoding (as it may use special characters).

Answer 2

Analysis
If we look at the PrimeFaces 3.2 documentation, there is no such attribute as language for Editor component and there is nothing mentioned in localization chapter.
PrimeFaces do not provide a way to localize Editor as they do provide for Calendar. And obviously they do provide it for calendar, because it is out of box feature for jQuery datePicker, which caledar is based on.
Outcome
Look for editor.js in PrimeFaces 3.2 sources. There is a section, where all editor buttons are initialized:
buttons: {
// name,title,command,popupName (""=use name)
init:
.....
"font,,fontname,|" +
"size,Font Size,fontsize,|" +
.....
}
There is provided format for separate button setup: name,title,command,popupName. The title part is the one you can make use of.
What you can do, you can build primefaces sources with your own titles provided, or override them in other way I cannot think of.
Help
If you are using maven, you can install customized primefaces in local or centralized repository of your own and use it instead of original dependency.
Lesson
You shouldn't look for old documentation, when you are using newer version. Look for the documentation of the version you are using.

Answer 3

Since JSF2 and Primefaces have jQuery, you can simply run this code on your page:
$(function(){
$(".ui-editor-group>.ui-editor-button").each(function(){
var title = $(this).attr("title").toLowerCase();
switch(title){
case "bold": title = "Negrito"; break;
case "italic": title = "Itálico"; break;
case "underline": title = "Sublinhado"; break;
case "align text left": title = "Alinhado à esquerda"; break;
case "center": title = "Centralizado"; break;
case "align text right": title = "Alinhado à direita"; break;
case "justify": title = "Justificado"; break;
case "insert hyperlink": title = "Inserir link"; break;
case "remove hyperlink": title = "Remover link"; break;
}
$(this).attr("title", title);
})
})
This little jQuery code can change Primefaces Editor's strings to wherever you want. I made it only for a few editor's components because I didn't used all of them.
If you need to translate the other options, simply add them inside the switch command. Don't forget that all titles inside switch command are in lowercase, due to ".toLowerCase()" method on line three. I've done this to simplify string management.
You can put it inside a function inside an external JavaScript file to get it cached, too.

Answer 4

This is a working example I made for Greek language (el_GR locale), all buttons:
$(".ui-editor-group>.ui-editor-button").each(function () {
var title = $(this).attr("title").toLowerCase();
switch (title) {
case "bold":
title = "Έντονα";
break;
case "italic":
title = "Πλάγια";
break;
case "underline":
title = "Υπογραμμισμένα";
break;
case "align text left":
title = "Στοίχιση αριστερά";
break;
case "center":
title = "Στοίχιση στο κέντρο";
break;
case "align text right":
title = "Στοίχiση δεξιά";
break;
case "justify":
title = "Στοίχιση";
break;
case "insert hyperlink":
title = "Εισαγωγή συνδέσμου";
break;
case "remove hyperlink":
title = "Αφαίρεση συνδέσμου";
break;
case "strikethrough":
title = "Διεγραμμένα";
break;
case "subscript":
title = "Δείκτης";
break;
case "superscript":
title = "Εκθέτης";
break;
case "font":
title = "Γραμματοσειρά";
break;
case "font size":
title = "Μέγεθος γραμματοσειράς";
break;
case "style":
title = "Στυλ";
break;
case "font color":
title = "Χρώμα γραμματοσειράς";
break;
case "text highlight color":
title = "Χρώμα επισήμανσης κειμένου";
break;
case "remove formatting":
title = "Κατάργηση μορφοποίησης";
break;
case "bullets":
title = "Λίστα με κουκκίδες";
break;
case "numbering":
title = "Αριθμητική λίστα";
break;
case "outdent":
title = "Προεξοχή";
break;
case "indent":
title = "Εσοχή";
break;
case "undo":
title = "Αναίρέση";
case "redo":
title = "Επαναφορά";
break;
case "insert horizontal rule":
title = "Eισαγωγή οριζόντιας γραμμής";
break;
case "insert image":
title = "Εισαγωγή εικόνας";
break;
case "cut":
title = "Κόψιμο";
break;
case "copy":
title = "Αντιγραφή";
break;
case "paste":
title = "Επικόλληση";
break;
case "paste as text":
title = "Επικόλληση ως απλό κείμενο";
break;
case "print":
title = "Εκτύπωση";
break;
case "show source":
title = "Εμφάνιση κώδικα";
break;
case "Show Rich Text":
title = "Εμφάνιση εύκολης επεξεργασίας άρθρου";
break;
}
$(this).attr("title", title);
});