1

我想在具有不同字符集的同一编辑器中使用TinyMCE 字符映射插件。

例如，一个工具栏按钮显示带有数学符号的字符映射，另一个带有箭头。

TinyMCE 字符映射插件具有覆盖默认字符映射的charmap配置选项：

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并单独配置。

4

2 回答 2

2

这是一个很好的问题。我有很多时间使用TinyMCE，却忘记了它有多棒。我不得不为这个刮擦手册，但是...

有一种方法可以一次添加两个按钮（或任意多个），并将所需的任何图标分配给每个按钮。

您可以使用设置回调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中检查上述代码

于 2020-09-20T17:35:12.493 回答
0

您可以通过执行以下操作在加载之前更改设置：

function getMap(){
  if (true){
     return [
       [0x2615, 'morning coffee']
     ];
  } else {
     return [
       [0x2616, 'evening coffee']
     ];
  }
}

tinymce.init({
  ....
  charmap: getMap()
});

要在加载后更改设置，您可以执行以下操作：

tinymce.init({
  ....
  charmap: [
     [0x2615, 'morning coffee']
  ]
});

//As an example, we can use setTimeout.
setTimeout(function(){
    tinymce.settings.charmap = [
      [0x2615, 'morning coffee'],
      [0x2616, 'day'],
      [0x2617, 'tunaaaaa']
    ];
},5000);

编辑：Codepen：https ://codepen.io/Terrafire123/pen/rNeqazr

于 2020-09-18T11:22:22.077 回答