Bubble editor form customization

cranworth

I require a slightly complex looking bubble editor than the default one. One of my table columns lists links to files uploaded by users. I have used the Blueimp file upload plug-in to some success. However, it's integration into Datatable's editor currently seems an impossibility.

The file uploader can be integrated otherwise into any page or form by placing the upload button:

<span class="btn btn-success fileinput-button">
      <i class="glyphicon glyphicon-plus"></i>
      <span>Select files...</span>
      <input id="fileupload" type="file" name="files[]" multiple>
</span>

and then activating in $(document).ready(function() { ... }); as:

$('#fileupload').fileupload({
         // options 
 });

But alas, how to do all this for the bubble editor form? The documentation mentions form-options but the options look very limited.

Should I consider writing and designing my own editor form?

allan

Hi,

What you would need to do in this situation is to create a plug-in field type. The plug-in would create the HTML you describe and then simply run the $().fileupload() method on it.

Regards,
Allan

cranworth

Hi Allan,

Looks like that is exactly what I need. I wish to use a summernote WYSIYG field. I have read Datatable editor's plug-in API carefully. But I couldn't figure out where I could initialize my summernote:

$('.mysummernote').summernote();

In create or enable or elsewhere of plug-in field type?

allan

Hi,

You might find some of the existing plug-ins useful for this. For example the Bootstrap date time picker shows initialisation with a jQuery plug-in. Many of the other plug-ins also do something similar such as the chosen plug-in.

Allan