{"id":12673,"date":"2021-06-13T06:33:43","date_gmt":"2021-06-13T11:33:43","guid":{"rendered":"httpss:\/\/www.powenko.com\/wordpress\/docs\/tinymce\/ui-components\/autocompleter%e5%85%a7%e5%ae%b9%e6%a0%a1%e6%ad%a3\/"},"modified":"2021-06-13T06:42:22","modified_gmt":"2021-06-13T11:42:22","slug":"autocompleter%e5%85%a7%e5%ae%b9%e6%a0%a1%e6%ad%a3","status":"publish","type":"docs","link":"https:\/\/www.powenko.com\/wordpress\/?docs=tinymce\/ui-components\/autocompleter%e5%85%a7%e5%ae%b9%e6%a0%a1%e6%ad%a3","title":{"rendered":"Autocompleter\u5167\u5bb9\u6821\u6b63"},"content":{"rendered":"
\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n    <!--\r\n    <script src="httpsss:\/\/cdn.tiny.cloud\/1\/mott8ilewgbu1tryzfu9q7sdcmn5qfqt19jixbvaqgaz6kjc\/tinymce\/5\/tinymce.min.js" referrerpolicy="origin"><\/script>\r\n    -->\r\n    <script src="httpsss:\/\/code.jquery.com\/jquery-1.11.3.js"><\/script>\r\n    <script src="..\/..\/..\/system\/libs\/tinymce\/js\/tinymce\/tinymce.min.js" referrerpolicy="origin"><\/script>\r\n\r\n    <script>\r\n\r\n\r\n\r\n        var specialChars = [\r\n            { text: 'exclamation mark', value: '!' },\r\n            { text: 'at', value: '@' },\r\n            { text: 'hash', value: '#' },\r\n            { text: 'dollars', value: '$' },\r\n            { text: 'percent sign', value: '%' },\r\n            { text: 'caret', value: '^' },\r\n            { text: 'ampersand', value: '&' },\r\n            { text: 'asterisk', value: '*' }\r\n        ];\r\n        tinymce.init({\r\n            selector: 'textarea#richTextArea_ww_powenko_com',\r\n            height: 250,\r\n            setup: function (editor) {\r\n                var onAction = function (autocompleteApi, rng, value) {\r\n                    editor.selection.setRng(rng);\r\n                    editor.insertContent(value);\r\n                    autocompleteApi.hide();\r\n                };\r\n\r\n                var getMatchedChars = function (pattern) {\r\n                    return specialChars.filter(function (char) {\r\n                        return char.text.indexOf(pattern) !== -1;\r\n                    });\r\n                };\r\n\r\n                \/* An autocompleter that allows you to insert special characters *\/\r\n                editor.ui.registry.addAutocompleter('specialchars', {\r\n                    ch: ':',\r\n                    minChars: 1,\r\n                    columns: 'auto',\r\n                    onAction: onAction,\r\n                    fetch: function (pattern) {\r\n                        return new tinymce.util.Promise(function (resolve) {\r\n                            var results = getMatchedChars(pattern).map(function (char) {\r\n                                return {\r\n                                    type: 'autocompleteitem',\r\n                                    value: char.value,\r\n                                    text: char.text,\r\n                                    icon: char.value\r\n                                }\r\n                            });\r\n                            resolve(results);\r\n                        });\r\n                    }\r\n                });\r\n\r\n                \/**\r\n                 * An autocompleter that allows you to insert special characters.\r\n                 * Items are built using the CardMenuItem.\r\n                 *\/\r\n                editor.ui.registry.addAutocompleter('specialchars_cardmenuitems', {\r\n                    ch: '-',\r\n                    minChars: 1,\r\n                    columns: 1,\r\n                    highlightOn: ['char_name'],\r\n                    onAction: onAction,\r\n                    fetch: function (pattern) {\r\n                        return new tinymce.util.Promise(function (resolve) {\r\n                            var results = getMatchedChars(pattern).map(function (char) {\r\n                                return {\r\n                                    type: 'cardmenuitem',\r\n                                    value: char.value,\r\n                                    label: char.text,\r\n                                    items: [\r\n                                        {\r\n                                            type: 'cardcontainer',\r\n                                            direction: 'vertical',\r\n                                            items: [\r\n                                                {\r\n                                                    type: 'cardtext',\r\n                                                    text: char.text,\r\n                                                    name: 'char_name'\r\n                                                },\r\n                                                {\r\n                                                    type: 'cardtext',\r\n                                                    text: char.value\r\n                                                }\r\n                                            ]\r\n                                        }\r\n                                    ]\r\n                                }\r\n                            });\r\n                            resolve(results);\r\n                        });\r\n                    }\r\n                });\r\n            },\r\n            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\r\n        });\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n<textarea id="richTextArea_ww_powenko_com">\r\n\u8acb\u8f38\u5165:amp\r\n <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>\r\n  <p><\/p>\r\n<\/textarea>\r\nwww.popwenko.comw\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\"\"<\/a><\/p>\n