Using HannaCode with the Table field

[spacemonkey95]

Hi all,

I've got a Table field on one of my pages. The first column requires the use of Hanna Code so I can add custom icons to the table cell. As per the settings for that particular field, I've set the textformatter option as TextformatterHannaCode (as the screenshot will show, for this particular field it's not possible to just select text formatters from a select dropdown. Instead I have to type in the value).

Now, if I manually type in my HannaCode label (e.g. [[icons_copy]] )  then it will output correctly onto the page, but I need to also have the HannaCode selection menu which normally shows up in CKEditor when right-clicking in the textarea field. Does anyone know how I can achieve this? Do I need to apply a different setting in the Settings area as shown in the screenshot?

[spacemonkey95]

Does anyone have any ideas on this one? I haven't solved the problem and could really do with finding a way around it. Thanks 

[Macrura]

Maybe consider using a javascript select such as Selectize.js; you could init those fields and let selectize get the options from a custom js array... that's probably the only way to make an icon select in a column of table without actually making it a page select or options;  Plus you could actually show the icon when using  a select and store the class as the value; when rendering i don't think you'd need bother with hanna code, you could just output the icon.

[spacemonkey95]

Thanks Macrura, this might be a more elegant solution! I didn't know about Selectize.js and it wouldn't have occurred to me that it could have been used for this!

I'm just reading more about it to see if I can figure out how to use this for my requirements.

[Macrura]

ok here is a sample function that i'm using to init selectize on a table field:

$(function(){
	$('li.Inputfield_table_field tr').each(function(){

		var selOpts = new Array();
		// add stuff to JS your array here...

		$(this).find('input[name*="_icon_select"]').selectize({
			delimiter: ' ',
			persist: false,
			maxItems: 1,
			options: selOpts,
		});

	});
});

 

so for example, you would need to be using AdminCustomFiles module and then this would be inside the ProcessPageEdit.js