如何将我自己的值设置为 dojo editor fontChoice 插件？

Question

我想使用 dojo 的 fontchoice plugin，但我想对 formatBlock 使用我自己的一组选择，即 h1 与 "My own localized h1 title" 和 h4 与 "My own localized h4 title"

怎么做？

Answer 1

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

另一种方式是下面的片段。它非常简单，但是不是很好，因为它会更改页面的所有 dijit 编辑器的语言环境。如果你只有一个，或者如果所有的都一样，那还可以。

原理与方法一相同，但我们动态地 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 editor fontChoice 插件？

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

javascript

dojo

editor