<!DOCTYPE html>
<html lang="en">
<head>
<!--
<script src="httpsss://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
-->
<script src="httpsss://code.jquery.com/jquery-1.11.3.js"></script>
<script src="../../../system/libs/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script>
var specialChars = [
{ text: 'exclamation mark', value: '!' },
{ text: 'at', value: '@' },
{ text: 'hash', value: '#' },
{ text: 'dollars', value: '$' },
{ text: 'percent sign', value: '%' },
{ text: 'caret', value: '^' },
{ text: 'ampersand', value: '&' },
{ text: 'asterisk', value: '*' }
];
tinymce.init({
selector: 'textarea#richTextArea_ww_powenko_com',
height: 250,
setup: function (editor) {
var onAction = function (autocompleteApi, rng, value) {
editor.selection.setRng(rng);
editor.insertContent(value);
autocompleteApi.hide();
};
var getMatchedChars = function (pattern) {
return specialChars.filter(function (char) {
return char.text.indexOf(pattern) !== -1;
});
};
/* An autocompleter that allows you to insert special characters */
editor.ui.registry.addAutocompleter('specialchars', {
ch: ':',
minChars: 1,
columns: 'auto',
onAction: onAction,
fetch: function (pattern) {
return new tinymce.util.Promise(function (resolve) {
var results = getMatchedChars(pattern).map(function (char) {
return {
type: 'autocompleteitem',
value: char.value,
text: char.text,
icon: char.value
}
});
resolve(results);
});
}
});
/**
* An autocompleter that allows you to insert special characters.
* Items are built using the CardMenuItem.
*/
editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {
ch: '-',
minChars: 1,
columns: 1,
highlightOn: ['char_name'],
onAction: onAction,
fetch: function (pattern) {
return new tinymce.util.Promise(function (resolve) {
var results = getMatchedChars(pattern).map(function (char) {
return {
type: 'cardmenuitem',
value: char.value,
label: char.text,
items: [
{
type: 'cardcontainer',
direction: 'vertical',
items: [
{
type: 'cardtext',
text: char.text,
name: 'char_name'
},
{
type: 'cardtext',
text: char.value
}
]
}
]
}
});
resolve(results);
});
}
});
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>
</head>
<body>
<textarea id="richTextArea_ww_powenko_com">
請輸入:amp
<p>Type <b>:</b> below and then keep typing to reduce further matches. For example, typing <b>:amp</b> should show the ampersand item in the menu. Pressing esc should close the autocomplete menu.</p>
<p></p>
</textarea>
www.popwenko.comw
</body>
</html>
