TinyMCE-ICompleter文字校正

by powenko

HTML

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tiny.cloud/1/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
      <script>

    </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>

</body>
</html>

JavaScript

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);
                        });
                    }
                });

                /**
       ...