我想在具有不同字符集的同一编辑器中使用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并单独配置。
这是一个很好的问题。我有很多时间使用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中检查上述代码
您可以通过执行以下操作在加载之前更改设置：
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