Sollten die vorhandenen Editor Widgets nicht ausreichen gibt es die Möglichkeit eigene Widgets mitzubringen. Dafür wird eine JavaScript benötigt.

boxEditorControls['new_widget']=GridBackbone.View.extend({
className: "grid-editor-widget grid-editor-widget-new-widget",
initialize:function(){
},
render:function(){
var widget_vals = this.model.container[this.model.structure.key];
... HTML mit Input Feldern aufbauen
return this;
},
fetchValue:function(){
... String oder JSON aus den Input Feldern holen und zurückgeben
return widget_vals;
}
});

Neben dem JavaScript ist es zusätzlich möglich CSS mitzubringen. Damit Grid das neue Widget nutzen kann müssen die Dateien registriert werden.

WordPress

Man legt ein neues Plugin an, erstellt die widget.js, optional die widget.css und registriert die Dateiurls über den Filter “grid_editor_widgets”.

add_filter("grid_editor_widgets", "grid_boxes_widgets_load");
function grid_boxes_widgets_load($widgets){
$widgets["js"][] = plugins_url( "widget.js", __FILE__ );
$widgets["css"][] = plugins_url( "widget.css", __FILE__ );
return $widgets;
}

Drupal

In einem Modul ( im Beispiel “grid_boxes” ) erstellt man die editor_widget.js und option die editor_widget.css. Über den grid_editor_widgets_alter Hook werden die Dateien angemeldet.

function grid_boxes_grid_editor_widgets_alter(&$editor_widgets){
	$editor_widgets["js"][] = drupal_get_path("module", "grid_boxes")."/editor_widget.js";
	$editor_widgets["css"][] = drupal_get_path("module", "grid_boxes")."/editor_widget.css";
}