我有以下代码，我需要能够编辑ckeditor小部件的模板。我了解到模板是不可变的。我想要实现的是能够在模板中插入变量。它可以实现吗？
( function($, Drupal, drupalSettings, CKEDITOR) {
CKEDITOR.plugins.add('tabslinks',{
requires: 'widget',
lang: 'en',
icons: 'tabslinks',
hidpi: true, // %REMOVE_LINE_CORE%
init: function(editor) {
editor.ui.addButton('tabslinks', {
label: 'Create tabs links',
command: 'tabslinks',
icon: this.path + 'icons/tabslinks.png'
});
editor.addContentsCss(this.path + 'assets/contents.css');
editor.widgets.add('tabslinks',{
allowedContent: 'a(!tabslinks), a[!href];',
requiredContent: 'a',
editables: {
title: {
selector: '.tabslinks'
}
},
template: '<a class="tabslinks" href="" >' +
'Link should be a variable such as the result of var tabtitle ' +
'</a>',
button: 'Create tab title and link',
init: function () {
var tabtitle = this.element.getAttribute('data-cke-saved-href');
if(tabtitle){
this.setData('tabtitle',tabtitle);
}
},
upcast: function(element) {
return element.name == 'a' && element.hasClass('.tabslinks');
},
dialog: 'tabslinks',
data: function() {
/* Note I can edit the attributes in the following without a problem. The problem is that I cannot manipulate the dom, I have used methhods such as editor CKEDITOR.dom.element.createFromHtml(html) but that also breaks the widget, I have also tried to use jquery with no luck */
if(this.data.tabtitle){
this.element.setAttribute('data-cke-saved-href','#' + this.data.tabtitle);
this.element.setAttribute('data-toggle','tab');
}
}
} );
CKEDITOR.dialog.add( 'tabslinks', this.path + 'dialogs/tabslinks.js' );
}
} );
} )(jQuery, Drupal, drupalSettings, CKEDITOR);
我试图使用许多方法来尝试操作dom，但这会破坏小部件。有什么建议？