javascript - 将TinyMCE字符映射插件与多个配置一起使用

Question

我想在同一编辑器中使用TinyMCE character map plugin使用不同的字符集。
例如，一个工具栏按钮显示一个带有数学符号的字符映射，另一个显示箭头。
TinyMCE字符映射插件具有 charmap configuration option来覆盖默认字符映射:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'charmap',
  toolbar: 'charmap',
  menubar: 'insert',
  charmap: [
    [0x2615, 'morning coffee']
  ]
});

我该如何配置charmap，例如取决于我用来触发弹出窗口的工具栏按钮？
我正在考虑以下方法:1)编辑器已初始化后在运行时配置charmap或2)将现有插件“复制”为charmap2并分别进行配置。

Answer 1

这是一个很好的问题。我有很多时间使用TinyMCE，却忘记了它的强大程度。我不得不为这本草稿手册，但是...

There is a way to add both buttons (or as many as you want) at once and assign any icon you want to each button.

您可以在editor.addButton() 设置回调中使用TinyMCE方法。这是一个如何做的例子:

const myCharMap = {};
myCharMap.Math = [
  [0x223A, 'GEOMETRIC PROPORTION'],
  [0x223B, 'HOMOTHETIC'],
  [0x223C, 'TILDE OPERATOR'],
  [0x223D, 'REVERSED TILDE'],
  [0x223E, 'INVERTED LAZY S'],
  [0x223F, 'SINE WAVE'],
  [0x2240, 'WREATH PRODUCT'],
  [0x2241, 'NOT TILDE'],
  [0x2242, 'MINUS TILDE'],
  [0x2243, 'ASYMPTOTICALLY EQUAL TO'],
  [0x2244, 'NOT ASYMPTOTICALLY EQUAL TO'],
  [0x2245, 'APPROXIMATELY EQUAL TO'],
  [0x2246, 'APPROXIMATELY BUT NOT ACTUALLY EQUAL TO'],
  [0x2247, 'NEITHER APPROXIMATELY NOR ACTUALLY EQUAL TO'],
  [0x2248, 'ALMOST EQUAL TO'],
  [0x2249, 'NOT ALMOST EQUAL TO'],
  [0x224A, 'ALMOST EQUAL OR EQUAL TO'],
  [0x224B, 'TRIPLE TILDE'],
  [0x224C, 'ALL EQUAL TO'],
  [0x224D, 'EQUIVALENT TO'],
  [0x224E, 'GEOMETRICALLY EQUIVALENT TO'],
  [0x224F, 'DIFFERENCE BETWEEN'],
  [0x2250, 'APPROACHES THE LIMIT'],
  [0x2251, 'GEOMETRICALLY EQUAL TO'],
  [0x2252, 'APPROXIMATELY EQUAL TO OR THE IMAGE OF'],
  [0x2253, 'IMAGE OF OR APPROXIMATELY EQUAL TO'],
  [0x2254, 'COLON EQUALS'],
  [0x2255, 'EQUALS COLON'],
  [0x2256, 'RING IN EQUAL TO'],
  [0x2257, 'RING EQUAL TO'],
  [0x2258, 'CORRESPONDS TO'],
  [0x2259, 'ESTIMATES'],
  [0x225A, 'EQUIANGULAR TO'],
  [0x225B, 'STAR EQUALS'],
  [0x225C, 'DELTA EQUAL TO'],
  [0x225D, 'EQUAL TO BY DEFINITION'],
  [0x225E, 'MEASURED BY'],
  [0x225F, 'QUESTIONED EQUAL TO'],
  [0x2260, 'NOT EQUAL TO'],
  [0x2261, 'IDENTICAL TO'],
  [0x2262, 'NOT IDENTICAL TO'],
  [0x2263, 'STRICTLY EQUIVALENT TO'],
  [0x2264, 'LESS-THAN OR EQUAL TO'],
  [0x2265, 'GREATER-THAN OR EQUAL TO'],
  [0x2266, 'LESS-THAN OVER EQUAL TO'],
  [0x2267, 'GREATER-THAN OVER EQUAL TO'],
  [0x2268, 'LESS-THAN BUT NOT EQUAL TO'],
  [0x2269, 'GREATER-THAN BUT NOT EQUAL TO'],
  [0x226A, 'MUCH LESS-THAN'],
  [0x226B, 'MUCH GREATER-THAN'],
  [0x226C, 'BETWEEN'],
  [0x226D, 'NOT EQUIVALENT TO'],
  [0x226E, 'NOT LESS-THAN'],
  [0x226F, 'NOT GREATER-THAN'],
  [0x2270, 'NEITHER LESS-THAN NOR EQUAL TO'],
  [0x2271, 'NEITHER GREATER-THAN NOR EQUAL TO'],
  [0x2272, 'LESS-THAN OR EQUIVALENT TO'],
  [0x2273, 'GREATER-THAN OR EQUIVALENT TO'],
  [0x2274, 'NEITHER LESS-THAN NOR EQUIVALENT TO'],
  [0x2275, 'NEITHER GREATER-THAN NOR EQUIVALENT TO'],
  [0x2276, 'LESS-THAN OR GREATER-THAN'],
  [0x2277, 'GREATER-THAN OR LESS-THAN'],
  [0x2278, 'NEITHER LESS-THAN NOR GREATER-THAN'],
  [0x2279, 'NEITHER GREATER-THAN NOR LESS-THAN'],
  [0x227A, 'PRECEDES'],
  [0x227B, 'SUCCEEDS'],
  [0x227C, 'PRECEDES OR EQUAL TO'],
  [0x227D, 'SUCCEEDS OR EQUAL TO'],
  [0x227E, 'PRECEDES OR EQUIVALENT TO'],
  [0x227F, 'SUCCEEDS OR EQUIVALENT TO'],
  [0x2280, 'DOES NOT PRECEDE'],
  [0x2281, 'DOES NOT SUCCEED'],
  [0x2282, 'SUBSET OF'],
  [0x2283, 'SUPERSET OF'],
  [0x2284, 'NOT A SUBSET OF'],
  [0x2285, 'NOT A SUPERSET OF'],
  [0x2286, 'SUBSET OF OR EQUAL TO'],
  [0x2287, 'SUPERSET OF OR EQUAL TO'],
  [0x2288, 'NEITHER A SUBSET OF NOR EQUAL TO'],
  [0x2289, 'NEITHER A SUPERSET OF NOR EQUAL TO'],
  [0x228A, 'SUBSET OF WITH NOT EQUAL TO'],
  [0x228B, 'SUPERSET OF WITH NOT EQUAL TO'],
  [0x228C, 'MULTISET'],
  [0x228D, 'MULTISET MULTIPLICATION'],
  [0x228E, 'MULTISET UNION'],
  [0x228F, 'SQUARE IMAGE OF'],
  [0x2290, 'SQUARE ORIGINAL OF'],
  [0x2291, 'SQUARE IMAGE OF OR EQUAL TO'],
  [0x2292, 'SQUARE ORIGINAL OF OR EQUAL TO'],
  [0x2293, 'SQUARE CAP'],
  [0x2294, 'SQUARE CUP'],
  [0x2295, 'CIRCLED PLUS'],
  [0x2296, 'CIRCLED MINUS'],
  [0x2297, 'CIRCLED TIMES'],
  [0x2298, 'CIRCLED DIVISION SLASH'],
  [0x2299, 'CIRCLED DOT OPERATOR'],
  [0x229A, 'CIRCLED RING OPERATOR'],
  [0x229B, 'CIRCLED ASTERISK OPERATOR'],
  [0x229C, 'CIRCLED EQUALS'],
  [0x229D, 'CIRCLED DASH'],
  [0x229E, 'SQUARED PLUS'],
  [0x229F, 'SQUARED MINUS'],
  [0x22A0, 'SQUARED TIMES'],
  [0x22A1, 'SQUARED DOT OPERATOR'],
  [0x22A2, 'RIGHT TACK'],
  [0x22A3, 'LEFT TACK'],
  [0x22A4, 'DOWN TACK'],
  [0x22A5, 'UP TACK'],
  [0x22A6, 'ASSERTION'],
  [0x22A7, 'MODELS'],
  [0x22A9, 'FORCES'],
  [0x22AA, 'TRIPLE VERTICAL BAR RIGHT TURNSTILE'],
  [0x22AB, 'DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE'],
  [0x22AC, 'DOES NOT PROVE'],
  [0x22AD, 'NOT TRUE'],
  [0x22AE, 'DOES NOT FORCE'],
  [0x22AF, 'NEGATED DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE'],
  [0x22B0, 'PRECEDES UNDER RELATION'],
  [0x22B1, 'SUCCEEDS UNDER RELATION'],
  [0x22B2, 'NORMAL SUBGROUP OF'],
  [0x22B3, 'CONTAINS AS NORMAL SUBGROUP'],
  [0x22B4, 'NORMAL SUBGROUP OF OR EQUAL TO'],
  [0x22B5, 'CONTAINS AS NORMAL SUBGROUP OR EQUAL TO'],
  [0x22B6, 'ORIGINAL OF'],
  [0x22B7, 'IMAGE OF'],
  [0x22B8, 'MULTIMAP'],
  [0x22B9, 'HERMITIAN CONJUGATE MATRIX'],
  [0x22BA, 'INTERCALATE'],
  [0x22BB, 'XOR'],
  [0x22BC, 'NAND'],
  [0x22BD, 'NOR'],
  [0x22BE, 'RIGHT ANGLE WITH ARC'],
  [0x22BF, 'RIGHT TRIANGLE'],
  [0x22C0, 'N-ARY LOGICAL AND'],
  [0x22C1, 'N-ARY LOGICAL OR'],
  [0x22C2, 'N-ARY INTERSECTION'],
  [0x22C3, 'N-ARY UNION']
];
myCharMap.Coffee = [
  [0x2615, 'morning coffee']
];
tinymce.init({
  selector: '#mytextarea',
  theme: 'modern',
  menubar: 'insert',
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime table contextmenu paste code'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | bullist numlist outdent indent | fontsizeselect | coffee | math',
  setup: function(editor) {
    editor.addButton('coffee', {
      icon: 'charmap',
      tooltip: "Coffee Symbol!!!",
      onclick: function() {
        editor.settings.charmap = myCharMap.Coffee;
        editor.execCommand('mceShowCharmap');
      }
    });
    editor.addButton('math', {
      icon: 'charmap',
      tooltip: "Math Symbols!!!",
      onclick: function() {
        editor.settings.charmap = myCharMap.Math;
        editor.execCommand('mceShowCharmap');
      }
    });
  }
});

您可以在Fiddle中检查以上代码