我想在同一个编辑器中使用不同字符集的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(在编辑器已经初始化之后在运行时配置CCD_ 3；复制"；现有的插件CCD_ 4，并单独配置。
这是个不错的问题。我花了很多时间使用TinyMCE，却忘记了它有多棒。我不得不为这本书重新编写手册，但。。。
有一种方法可以同时添加两个按钮(或，根据需要添加(并为每个按钮指定您想要的任何图标。
您可以在TinyMCE设置回调中使用editor.addButton()方法。下面是一个如何做到这一点的例子：
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);
编辑：代码笔：https://codepen.io/Terrafire123/pen/rNeqazr