问题描述
我想在同一编辑器中使用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并分别进行配置。
解决方法
这是一个很好的问题。我有很多时间使用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',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