Petr Petr - 6 months ago 16
Javascript Question

how to set my own values to dojo editor fontChoice plugin?

I want to use dojo's fontchoice plugin, but I want to use my own set of choices for formatBlock, i.e. h1 with "My own localized h1 title" and h4 with "My own localized h4 title"

How to do it?

ben ben
Answer

There are multiple ways of achieving that. One is to make a new plugin widget, inheriting from dijit/_editor/plugins/FontChoice and, in this new plugin, you will be able to handle the localization.

Another way is the snippets bellow. It is very straight forward, however is is not super nice as it will change the locale for ALL dijit Editor of the page. If you have only one, or if all should be same, then it is kind of ok.

The principle is the same as the approach one, but we entends the FontChoice on the fly instead instead of creating a new widget.

require(["dojo/_base/lang", "dijit/Editor", "dijit/_editor/plugins/FontChoice", "dojo/domReady!"], function(lang, Editor, FontChoice){

    // this is what allows you to localize the content
    // first make a copy of the original method
    FontChoice._FontDropDown.prototype.postMixInPropertiesOriginal = FontChoice._FontDropDown.prototype.postMixInProperties;
    // then override it
    lang.extend(FontChoice._FontDropDown, {
        postMixInProperties: function() {
          // call the original method to not break any functionnalities
          this.postMixInPropertiesOriginal();
          
          // change the existing string into the loclaized ones
          lang.mixin(this.strings, {
            "noFormat": "localized None",
            "p": "localized Paragraph",
            "h1": "localized Heading",
            "h2": "localized Subheading",
            "h3": "localized Sub-subheading",
            "pre": "localized Pre-formatted"
          });
         
        }
    });
  
    // you MUST create the editor AFTER extending the plugin
    var editor = new Editor({
          extraPlugins:['fontName', 'fontSize', 'formatBlock']
    }, "test");
    editor.startup();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">

<div class="tundra">
  <div id="test"></div>
</div>