Question

我想使用dojo的fontchoice plugin，但我想使用我自己的一套formatBlock选项，即h1使用“我自己的本地化h1标题”而h4使用“我自己的本地化h4标题”

怎么做？

Answer 1

有多种方法可以实现这一目标。一个是创建一个新的插件小部件，继承自dijit/_editor/plugins/FontChoice，并且在这个新的插件中，您将能够处理本地化。

另一种方式是下面的片段。这是非常直接的，但是不是超级好，因为它将改变页面的所有dijit编辑器的语言环境。如果你只有一个，或者所有都应该相同，那就没关系了。

原则与方法1的原理相同，但我们会动态地FontChoice而不是创建新的小部件。

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>

Answer 2

这是一个更好的解决方案：

require(["dojo/aspect",...], function(aspect,...) {
aspect.after(fontChoice._FontDropDown.prototype, "postMixInProperties", function() {
                lang.mixin(this.strings, {
                    "h1": "localized Heading",
                    "h2": "localized Subheading",
                    "h4": "localized Sub-subheading 4",
                });
       });
 //....
 });

如何将自己的值设置为dojo编辑器fontChoice插件？

2 个答案: