I am in the process of creating a custom 'textfield' plugin where the user will be presented with a select box of options for the value of the textfield's name attribute as opposed to the usual textfield requiring the user to type in the value directly.
The custom plugin was modeled after the pre-installed textfield plugin and not many changes were needed to produce the intended results. The plugin is nearly complete except that I have not determined how to dynamically alter the options of the select box.
A text diff showing the relevant changes between the textfield plugin and my custom textfield plugin is shown below:
The reason for the need to dynamically alter the options of the select box is to prevent the user from creating more than one textfield having the same value for the 'name' attribute. Naturally, the select box list should shorten as more textfields are created.
I have determined that the return_s_options() function is triggered only once during the opening of the first dialog box and thus is not updated during subsequent dialog box openings.
My only thought/workaround would be to directly modify the object holding the items of the select box.
Does anyone know how to access this object or perhaps have a better solution?
-see attached print screen
The custom plugin was modeled after the pre-installed textfield plugin and not many changes were needed to produce the intended results. The plugin is nearly complete except that I have not determined how to dynamically alter the options of the select box.
A text diff showing the relevant changes between the textfield plugin and my custom textfield plugin is shown below:
/plugins/forms/textfield.js id:'_cke_saved_name', type:'text', label:editor.lang.textfield.name, 'default':'', accessKey:'N',
/plugins/mycustomtextfield/textfield.js
id:'_cke_saved_name',
type:'select', /* make it a select element */
label:editor.lang.textfield.name,
'default':'0',
accessKey:'N',
style:'width:100%',
items:return_s_options('UnusedFields',false) /* function returns pre-defined select items */The reason for the need to dynamically alter the options of the select box is to prevent the user from creating more than one textfield having the same value for the 'name' attribute. Naturally, the select box list should shorten as more textfields are created.
I have determined that the return_s_options() function is triggered only once during the opening of the first dialog box and thus is not updated during subsequent dialog box openings.
My only thought/workaround would be to directly modify the object holding the items of the select box.
Does anyone know how to access this object or perhaps have a better solution?
-see attached print screen
Re: Dynamic Select Items - Help
Re: Dynamic Select Items - Help
Re: Dynamic Select Items - Help
I discovered this the other day after spending more hours into my ckeditor integration project.
However, the problem I now face is that the select element is not assigned a constant id value making it very difficult for me to locate and manipulate.
I found that during a single editor instance, the select element will be given an id value similar to xx_uiElement during the initial dialog definition. This value remains constant during the life of the editor instance. That is, the xx_uiElement id value will go unchanged regardless of the number of times the dialog is opened and closed.
However, once the editor is closed and destroyed, the same select element will be assigned a different id value (i.e yy_uiElement) when a new editor instance is created having identical settings and plugings.
This is a HUGE problem since the user may actually need to reopen a previously closed editor to add or correct the changes just made.
Would keeping all editor instances 'alive' be the solution for me?
I am not too keen about this option as the user may actually open several different editors during a single session.
Attachments:
Re: Dynamic Select Items - Help
Re: Dynamic Select Items - Help
Hey alfonsoml,
I really appreciate your help but can you provide me an example of using the .$ property of the uiElement?
Is that used inside my plugin definition and, if so, how?
What is the object of that property (uiElementObject.$) ??
Re: Dynamic Select Items - Help
Re: Dynamic Select Items - Help
Thank you for your help!
Although you did not provide the explicit solution you definitely pointed me in the right direction.
Here is how I managed to obtain a reference to the "real" select box.
/plugins/mycustomtextfield/textfield.js id:'_cke_saved_name', type:'select', /* make it a select element */ label:editor.lang.textfield.name, 'default':'0', accessKey:'N', style:'width:100%', items: /* function returns pre-defined select items */ [['--- Select Field Name ---',0]].concat(return_s_options('UnusedFields',false)) , setup: function(element){ // this.getInputElement().$ refers to the "real" select box // you can add or remove options and modify as needed }Re: Dynamic Select Items - Help
I post my solution to change dynamically a combobox in function of other combobox. I hope this example helps to someone.
function setCampos(){ CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").clear(); switch (CKEDITOR.dialog.getCurrent().getValueOf("tab1", "selTable")){ case "clientes": CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("Nombre","nombre"); CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("NIF","nif"); CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("Telefono","telefono"); break; case "vehiculos": CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("Marca","marca"); CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("Modelo","modelo"); CKEDITOR.dialog.getCurrent().getContentElement("tab1", "selField").add("Version","version"); break; } } CKEDITOR.dialog.add( 'referbd', function( editor ) { return { title : 'Insertar Campo', minWidth : 400, minHeight : 100, buttons:[ { type:'button', id:'inertBtn', label: 'Insertar', onClick: function(){ [...] }, onLoad: function(){ setCampos(); } },CKEDITOR.dialog.okButton ], contents : [ { id : 'tab1', label : 'First Tab', title : 'First Tab', elements : [ { type : 'select', id : 'selBBDD', 'default' : '', label : 'Base de Datos', labelLayout : 'horizontal', style:'width:100%', items : [ [ 'BD', 'bd' ] ] },{ type : 'select', id : 'selTable', 'default' : '', label : 'Tabla', style:'width:100%', labelLayout : 'horizontal', onClick: function(){ setCampos(); }, items : [ [ 'Clientes', 'clientes' ], [ 'Vehiculos' , 'vehiculos' ] ] },{ type : 'select', id : 'selField', 'default' : '', label : 'Campo', labelLayout : 'horizontal', style:'width:100%', items : [ [ '-' , '-' ] ] } ] } ] }; } );Re: Dynamic Select Items - Help
File: plugins/inserthtml/plugin.js
CKEDITOR.plugins.add('inserthtml', { requires: ['dialog'], lang : ['en'], init:function(a) { var b="inserthtml"; var c=a.addCommand(b,new CKEDITOR.dialogCommand(b)); c.modes={wysiwyg:1,source:0}; c.canUndo=false; a.ui.addButton("inserthtml",{ label:a.lang.inserthtml.title, command:b, icon:this.path+"inserthtml.gif" }); CKEDITOR.dialog.add(b,this.path+"dialogs/inserthtml.php")} });File: plugins/inserthtml/dialogs/inserthtml.php
<?php $connection = mysql_connect("SERVER", "USER", "PASS"); mysql_select_db("DB", $connection); $result = mysql_query("SELECT * FROM pages"); ?> CKEDITOR.dialog.add("inserthtml",function(e){ return{ title:'Link to Page', resizable : CKEDITOR.DIALOG_RESIZE_BOTH, minWidth:380, minHeight:220, onShow:function(){ }, onLoad:function(){ dialog = this; this.setupContent(); }, onOk:function(){ var sInsert=this.getValueOf('info','insertcode_area'); if ( sInsert.length > 0 ) e.insertHtml(sInsert); }, contents:[ { id:"info", name:'info', label:'Link to Page', elements:[{ type:'vbox', padding:0, children:[ {type:'html', html:'<span>Select Page to link to</span>' }, { type:'select', id:'selectPage', label:'select Page', items:[ <?php $i = 1; while($row = mysql_fetch_assoc($result)) { if($i == 1) { echo "['$row[title]','$row[id]']"; $i = null; } else echo ",['$row[title]','$row[id]']"; } ?>['one','1']] }] }] } ] }; });Basically All I did was load a .php file rather then a .html and then populated the items list from the database.
I havent modified the function to put the code into the dialog box yet, only the code to populate the drop down list.