{"id":15000,"date":"2025-04-07T14:02:12","date_gmt":"2025-04-07T08:02:12","guid":{"rendered":"https:\/\/shra.ru\/?p=15000"},"modified":"2025-04-07T14:02:14","modified_gmt":"2025-04-07T08:02:14","slug":"filtraciya-tegov-na-urovne-plagina-v-ckeditor-5","status":"publish","type":"post","link":"https:\/\/shra.ru\/2025\/04\/filtraciya-tegov-na-urovne-plagina-v-ckeditor-5\/","title":{"rendered":"\u0424\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u0435\u0433\u043e\u0432 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0432 CKEditor 5"},"content":{"rendered":"\n
\u041f\u043b\u0430\u0433\u0438\u043d DataFilter <\/strong>\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 HTML \u0442\u0435\u0433\u043e\u0432. \u041e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f «\u0440\u043e\u0434\u043d\u044b\u043c» \u0434\u043b\u044f CKE \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/p>\n\n\n\n\n\n\n\n \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0442\u0435\u0433\u0430 div<\/strong> — className1 \u0438 className2.<\/p>\n\n\n\n \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e DataFilter \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u0430 \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438. \u0412 \u043a\u043e\u0434\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n \u0424\u0443\u043d\u043a\u0446\u0438\u044f _addClassSupport<\/em> \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u044f \u0438\u0445 \u0432 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 MatcherPattern<\/a> \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435.<\/p>\n\n\n\n \u0423\u0441\u043b\u043e\u0432\u0438\u0435 classes<\/em> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0439\u0442\u0438 \u043f\u043e \u0432\u0441\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c html \u0442\u0435\u0433\u0430 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u043c\u0443 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/p>\n\n\n\n MatcherPattern \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u0414\u0435\u0442\u0430\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 CKE5 API.<\/p>\n","protected":false},"excerpt":{"rendered":" \u041f\u043b\u0430\u0433\u0438\u043d DataFilter \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0435\u0439 HTML \u0442\u0435\u0433\u043e\u0432. \u041e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f «\u0440\u043e\u0434\u043d\u044b\u043c» \u0434\u043b\u044f CKE \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[61],"tags":[102],"class_list":["post-15000","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-ckeditor"],"acf":[],"yoast_head":"\n\/**\n * @file\n * Defines the plugin.\n *\/\n\nimport {Plugin} from 'ckeditor5\/src\/core';\n\n\/**\n * The editing feature.\n *\n * @extends module:core\/plugin~Plugin\n *\/\nexport default class DummyEditing extends Plugin {\n \/**\n * @inheritDoc\n *\/\n init() {\n const editor = this.editor;\n\n \/\/ \u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e htmlSupport \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d\n const htmlSupport = editor.plugins.get('DataFilter');\n if (!htmlSupport) {\n console.warn('DataFilter plugin is not available!');\n } else {\n const classes_div = 'className1 className2';\n \/\/ \u0434\u0430\u043b\u0435\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f div\n \/\/ \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0432 \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e\n this._addClassSupport('span', classes_div);\n }\n }\n\n _addClassSupport(tag, classes) {\n const htmlSupport = this.editor.plugins.get('DataFilter');\n\n const classesList = classes.split(\/[\\s,]+\/);\n if (classesList[0] == '') return;\n\n htmlSupport.allowAttributes({\n name: tag,\n classes: RegExp('^(' + classesList.join('|') + ')$'),\n });\n }\n\n}<\/code><\/pre>\n\n\n\n