Javascript 在dialogDefinition上添加的另一个元素的设置函数中,CKEditor get table dialog class init Value
在阅读代码之前,请先阅读问题 我在它工作的表对话框的对话框定义中添加了一个复选框元素。现在,我希望在默认情况下,当正在编辑的表具有某个类(通常在“高级”选项卡上可见)时,选中该复选框。根据文档,我应该能够在设置功能中执行类似的操作。我尝试过很多事情,希望你能帮助我。这是我的密码Javascript 在dialogDefinition上添加的另一个元素的设置函数中,CKEditor get table dialog class init Value,javascript,jquery,dialog,ckeditor,Javascript,Jquery,Dialog,Ckeditor,在阅读代码之前,请先阅读问题 我在它工作的表对话框的对话框定义中添加了一个复选框元素。现在,我希望在默认情况下,当正在编辑的表具有某个类(通常在“高级”选项卡上可见)时,选中该复选框。根据文档,我应该能够在设置功能中执行类似的操作。我尝试过很多事情,希望你能帮助我。这是我的密码 CKEDITOR.on( 'dialogDefinition', function( evt ) { var dialog = evt.data; if(dialog.name == 'table' ||
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);
}
}
}
下面是一些调试语句,它们有助于添加到setup函数中,并理解正在发生的事情,您不需要经历我所经历的一切
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');
}
}