Създаване на плъгин - Cut - за CKEditor 4
В този урок ще ви покажа как да направите прост плъгин CKE 4, който ще:
Аз самият използвам CKEditor и дори има бутон "Вмъкване на прекъсване на страница за печат", който исках да използвам за тази цел. Реших обаче да направя всичко по човешки: така че да има бутон, да изглежда гражданско и HTML кодът да е мой.
Напишете плъгин за CKEditor, който създава бутон в лентата с инструменти, при щракване върху който се вмъква следното в текущата позиция на курсора:
Задачата е поставена, да я направим! Първо, попаднах на този прекрасен (между другото официален) урок в мрежата, който разказва как да направя прост плъгин, който вмъква текущата дата и час в позицията на курсора. Тоест на теория да го преначертая за моите нужди (вместо дата и час, за да вмъкна собствен HTML код) не беше много трудно и вече реших, че по-късно ще го преведа на български, но две неща попречиха:
В резултат на това беше решено да напиша собствен урок. И така, да започваме!
Създаване на файлове за приставката
Първо направете папка с името на приставката в папката с приставки на CKEditor. Нашият плъгин ще се казва „Pagecut“, така че нарекох папката „pagecut“ (обърнете внимание на малката буква!). Името на папката трябва да съвпада с името на вашия плъгин.
Сега създайте файл plugin.js в него. Този файл трябва да бъде наречен така и само така. Резултатът трябва да бъде:
Минимален изходен код
Сега отворете plugin.js и напишете вътре:
CKEDITOR.plugins.add( 'pagecut', init: function( editor)
Всички плъгини се създават с помощта на функцията CKEDITOR.plugins.add, която трябва да получи името на плъгина и обекта, свойствотокоето init трябва да бъде функция, която се извиква, когато плъгинът се инициализира.
За тази цел ще използваме функцията addCommand. С негова помощ ще опишем командата insertPagecut, която всъщност ще вмъкне нашия код в позицията на курсора.
editor.addCommand( 'insertPagecut', exec: function( editor) < editor.insertHtml( 'Това е персонализиран текст'); > >);
Описва се като обект, който засега има само един метод, exec. Той съдържа функция, която ще бъде изпълнена, когато се изпълни нашата команда insertPagecut.
Създаване на бутон
И така, иконата е готова, нека я поставим в папката на плъгина. За да поддържам ред, в папката на плъгина създадох друга папка с изображения, където поставих икона, наречена icon.png. Сега имаме следната файлова структура:
editor.ui.addButton( 'Pagecut', label: 'Insert cat', command: 'insertPagecut', icon: this.path + 'images/icon.png' > );
Връзка
Време е да използвате нашия плъгин! За да направите това, трябва да направите две неща на мястото, където сте извикали CKEditor.
Първо: В параметрите подайте името на нашия плъгин през config.extraPlugins, така че CKEditor да знае, че трябва да се зареди.
В този случай това се прави по следния начин:
Второ: Поставете бутона върху гнездото.
А именно, някъде в конфигурацията на лентата с инструменти пъхаме нашия „Pagecut“.
Ето как изглежда моят config.js след всички манипулации:
CKEDITOR.editorConfig = function( config ) config.uiColor = '#9A9A9A',
Ако всичко е направено правилно, когато презаредите страницата, ще видите нашия бутон, като кликнете върху който в позицията на курсора се вмъква „Това е произволен текст“.
Добре, плъгинът работи. Но ние го искамени вмъкна не текст, а HTML код. Добре, нека се променим.
Вместо editor.insertHtml( 'Това е произволен текст'); напишете editor.insertHtml( '
Опитваме. Ето ги тези времена! Само вмъкнати. Какво стана? Нека опитаме нещо друго.
И по някаква причина се оказваOlolo.
Като цяло, CKE цензурира безцеремонно това, което предаваме на editor.insertHtml! Ровейки се в документацията, открих, че този метод има втори аргумент, режим, който на теория показва дали е необходима допълнителна настройка. Но не успях да го използвам, за да принудя вложката, както трябва. Все още го преправям и това е.
След известно ровене намерих друго решение:
var element = CKEDITOR.dom.element.createFromHtml( '
Тук първо се създава DOM елемент, който след това се вмъква с помощта на insertElement. Това помага да се предотврати самоактивност от страна на CKE. Ние проверяваме:
CSS се вмъква с помощта на CKEDITOR.addCss. Имайте предвид, че това е метод на екземпляр, а не глобален CKEDITOR. Това е css, който измислих:
Просто и с вкус. Видях икона като фон:
Това е всичко. Научихте как да направите прост плъгин за CKEditor. В заключение, прикачвам архив със самия плъгин.
Ще се видим скоро!
Можете да оставите коментар във „Facebook“: