CKEditor在dialogDefinition上添加的另一个元素的Set Up函数中获取表对话框类init Valu

CKEditor get table dialog class init Value in Set Up function of another element added on dialogDefinition

本文关键字:获取 对话框 Valu init 函数 Set dialogDefinition 添加 另一个 CKEditor 元素      更新时间:2023-09-26

请在阅读代码之前阅读问题!!!

我在表对话框的对话框定义中添加了一个复选框元素(它很有效)。现在,我希望当正在编辑的表具有某个类(通常在高级选项卡上可见)时,默认情况下选中复选框。根据文档,我应该能够在我的设置功能中做这样的事情。我已经尝试了很多事情,希望你能帮助我。这是我的代码。

CKEDITOR.on( 'dialogDefinition', function( evt )
{
    var dialog = evt.data;
    if(dialog.name == 'table' || dialog.name=='tableProperties')
    {
        // Get dialog definition.
        var def = evt.data.definition;
        var infoTab = def.getContents( 'info' );
        infoTab.add(
        {
            type: 'checkbox',
            id: 'myCheckBox',
            label: 'Table Has Property',
            setup: function()
            {
                //Class to look for if I successfully get the input's value
                var classValueToLookFor = 'has-property';
                // The current CKEditor Dialog Instance
                var thisDialog = CKEDITOR.dialog.getCurrent();
                // The Element whose value I want to get
                var classElement = theDialog.getContentElement('advanced','advCSSClasses');
                // Trying to Get Value of this class Element According to documentation
                var containedClasses = theDialog.getValueOf('advanced','advCSSClasses');
                // Trying to debug the value above
                 console.log(containedClasses);  // This shows nothing
                // Trying to debug InitValue which shows something according to prototype 
                 console.log(classElement.getInitValue()); //This also shows nothing
                //Checking if Element has the class I'm looking for to mark the checkbox
                if(containedClasses.indexOf(classValueToLookFor) != -1)
                {
                    //Check current checkbox since value has been found                    
                    this.setValue('checked');
                }
            }
            onClick: function()   // You can ignore this function, just put it in case you were wondering how I'm putting the has-property, might help someone else (works well) ;)
            {
                 var checked =  this.getValue();
                 var classValueToSet = 'has-property';
                 var thisDialog = CKEDITOR.dialog.getCurrent();
                 var containedClasses = theDialog.getValueOf('advanced','advCSSClasses');
                 if(checked)
                 {
                      if(containedClasses.indexOf(classValueToSet) != -1)
                      {
                        //console.log('already contains class: '+classValueToSet);
                      }
                      else
                      {
                        containedClasses += containedClasses+" "+classValueToSet;
                      }
                 }
                 else
                 {
                      if(containedClasses.indexOf(classValueToSet) != -1)
                      {
                           containedClasses = containedClasses.replace(classValueToSet,'');
                      }
                      else
                      {
                        //console.log('already removed class: '+classValueToSet);
                      }
                 }
                 thisDialog.setValueOf('advanced','advCSSClasses',containedClasses);
            }
        }
}

以下是一些调试语句,它们有助于添加到设置函数中,并了解正在发生的事情,您不需要经历我所经历的一切;)

console.log('in setup function');
console.log(classElement);
console.log(classElement._);
console.log(classElement.getInitValue());
console.log(classElement.getInputElement());
var inputElement = classElement.getInputElement();
var inputElementId = inputElement.getId();
console.log($('#'+inputElementId+'.cke_dialog_ui_input_text'));    
console.log(classElement.getInputElement().value);

建议之前最好先测试一下你的答案。我尝试过的许多方法理论上应该有效,但实际上并不奏效。

好吧,经过几天的尝试和错误,这终于对我有效了。也许这对某人有帮助。我相信应该有一个更干净的方法来做这件事。祝大家一切顺利。

setup: function()
{
   //This current checkbox
   var checkbox = this;
   //the class I want to find on my table
   var var classValueToLookFor = 'has-property';
   //Current Dialog instance
   var thisDialog = CKEDITOR.dialog.getCurrent();
  //This code below gets a <td> element in the table
   var startElement = thisDialog.getParentEditor().getSelection().getStartElement();
  // This gets me the parent of the <td> element which is my current table instance
   var parentTable = $(startElement.$.offsetParent);
  //Finally check if the table has the property I'm looking for.
   if(parentTable.hasClass(classValueToLookFor))
   {
       //Mark the checkbox
       checkbox.setValue('checked');
   }
}