[英]Using TinyMCE character map plugin with multiple configs
我想在具有不同字符集的同一編輯器中使用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
,卻忘記了它有多棒。 我不得不為這本書刮擦手冊,但是......
有一種方法可以一次添加兩個按鈕(或盡可能多的,只要你想),並指定要每個按鈕的任何圖標。
您可以在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);
編輯:Codepen: https ://codepen.io/Terrafire123/pen/rNeqazr
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.