Drupal 用于在链接文本中输出动态变量的ckeditor小部件模板

我有以下代码，我需要能够编辑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);

（函数（$，Drupal，drupalSettings，CKEDITOR）{
CKEDITOR.plugins.add（'tabslinks'{
需要：'widget'，
朗:"嗯",，
图标：“选项卡链接”，
hidpi:true，//%删除\u行\u核心%
init：函数（编辑器）{
editor.ui.addButton（'tabslinks'{
标签：“创建选项卡链接”，
命令：“tabslinks”，
icon:this.path+'icons/tabslinks.png'
});
addContentsCss（this.path+'assets/contents.css'）；
editor.widgets.add（'tabslinks'{
allowedContent:'a（！tabslinks），a[！href]；'，
requiredContent:'a'，
可编辑内容：{
标题：{
选择器：'.tabslinks'
}
},
模板：“”，
按钮：“创建选项卡标题和链接”，
init：函数（）{
var tabtitle=this.element.getAttribute（'data-cke-saved-href'）；
if（tabtitle）{
this.setData（'tabtitle'，tabtitle）；
}
},
上行：功能（元素）{
return element.name=='a'&&element.hasClass（'.tabslinks'）；
},
对话框：“选项卡链接”，
数据：函数（）{
/*注意，我可以毫无问题地编辑下面的属性。问题是我无法操作dom，我使用了诸如编辑器CKEDITOR.dom.element.createFromHtml（html）之类的方法，但这也破坏了小部件，我也尝试过使用jquery，但运气不好*/
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，但这会破坏小部件。有什么建议吗