Pfthb

I am using CkEditor 4.10.1. In this I want to load Placeholder dialog with Dynamic content elements.

Currently It is opening same Dialog with Same elements on every place holder, I want to render dynamic Elements in Dialog.

How can I do this.

Descriptions:

When I click on Agency City placeholder than it is opening one dialog box for that placeholder and Showing the properties.

When I am Clicking on Agency Name placeholder than also it is opening same dialog box with same properties.

I want to display display different properties based on Placeholder selection.

CKEDITOR.addCss('span > .cke_placeholder background-color: #ffeec2; ');

CKEDITOR.plugins.add('autotag', requires:autocomplete,textmatch,toolbar,wysiwygarea,basicstyles,link,undo,placeholder,widget,dialog',
height: 340,
init: function (editor) 
 editor.on('instanceReady', function (evt) 
 var config = ; 
 function textTestCallback(range) 
 if (!range.collapsed) 
 return null;
 
 return CKEDITOR.plugins.textMatch.match(range, matchCallback);
 

 function matchCallback(text, offset) 
 var pattern = /[2([A-z]
 config.textTestCallback = textTestCallback;
 //The itemsArray variable is the example "database".

 var itemsArray = [
 
 id: 1,
 name: 'Address',
 description: 'Customer Support address.'
 ,
 
 id: 2,
 name: 'AssigneeName',
 description: 'Ticket assignee name.'
 ,
 
 id: 3,
 name: 'DeadlineTime',
 description: 'Time for the technician to handle this issue.'
 ,
 
 id: 4,
 name: 'DepartmentName',
 description: 'Department name responsible for handling this ticket.'
 ,
 
 id: 5,
 name: 'CaseID',
 description: 'Unique case number used to distinguish tickets.'
 ,
 
 id: 6,
 name: 'CaseName',
 description: 'Name of the ticket provided by the user.'
 ,
 
 id: 7,
 name: 'ContactEmail',
 description: 'Customer Support contact e-mail address.'
 ,
 
 id: 8,
 name: 'CustomerName',
 description: 'Recipient of your response.'
 ,
 
 id: 9,
 name: 'HotlineNumber',
 description: 'Customer Support Hotline number.'
 ,
 
 id: 10,
 name: 'TechnicianName',
 description: 'Technician who will handle this ticket.'
 
 ];

 function dataCallback(matchInfo, callback) 
 var data = itemsArray.filter(function (item) 
 var itemName = '[[' + item.name.toLowerCase() + ']]';
 return itemName.indexOf(matchInfo.query.toLowerCase()) == 0;
 );
 callback(data);
 

 config.dataCallback = dataCallback;

 // Define the templates of the autocomplete suggestions dropdown and output text.
 config.itemTemplate = '<li data-id="id">' +
 '<div><strong class="item-title">name</strong></div>' +
 '<div><i>description</i></div>' +
 '</li>';
 config.outputTemplate = '[[name]]<span>&nbsp;</span>';

 // Attach autocomplete to the editor.
 new CKEDITOR.plugins.autocomplete(editor, config);
 );

 // Register dialog.
 CKEDITOR.dialog.add('placeholder', function (editor) 
 debugger;
 alert('dialog Placeholder' + editor._.dataStore.id);
 var lang = editor.lang.placeholder,
 generalLabel = editor.lang.common.generalTab,
 validNameRegex = /^[^[]<>]+$/;
 var itms = new Array();
 itms[0] = new Array();
 itms[0][0] = "Meeting Time";
 itms[0][1] = "meetingTime";
 itms[1] = new Array();
 itms[1][0] = "Meeting Location";
 itms[1][1] = "meetingLoc";
 return 
 title: "Properties",
 minWidth: 300,
 minHeight: 400,
 onShow: function () 
 //alert("Show");
 //Removed
 ,
 onOk: function () 
 //Removed
 //alert("Ok");
 ,
 onCancel: function () 
 //Removed
 //alert("Cancel");
 ,
 contents: [
 
 id: 'info',
 //label: generalLabel,
 //title: generalLabel,
 label: "Properties",
 title: "Properties",
 elements: [
 
 id: 'id',
 type: 'select',
 style: 'width: 100%;',
 //label: lang.name,
 label: "Id",
 items: itms,
 'default': 'meetingLocation',
 required: true,
 validate: CKEDITOR.dialog.validate.regex(validNameRegex, lang.invalidName),
 setup: function (widget) 
 //this.setValue(widget.data.name);
 this.setValue('meetingTime');
 ,
 commit: function (widget) 
 widget.setData('id', this.getValue());
 
 ,
 
 id: 'name',
 type: 'text',
 style: 'width: 100%;',
 //label: lang.name,
 label: "Name",
 'default': '',
 required: true,
 validate: CKEDITOR.dialog.validate.regex(validNameRegex, lang.invalidName),
 setup: function (widget) 
 this.setValue(widget.data.name);
 ,
 commit: function (widget) 
 console.log(widget.data);
 widget.setData('name', this.getValue());
 
 
 ]
 
 ]
 ;
 );

 CKEDITOR.on('dialogDefinition', function (ev) 
 // Take the dialog name and its definition from the event data.
 var dialogName = ev.data.name;
 var dialogDefinition = ev.data.definition;
 );
);

Thanks in Advance. your help is highly appreciated.