Quill rich text editor for inline editing

[jintech]

Hi, I want to be able to use Quill rich text editor for inline editing in a Description column similar to how TinyMCE works here https://bryntum.com/products/grid/examples/tinymce-editor/ . Is there any way to achieve this?

[marcio]

Hey jintech,

Thanks for reaching out.

You can use another text editor the same way TinyMCE is used. The idea is to provide a custom editor that implements the editor contract used by CellEdit (getValue, setValue, isValid, focus) and then supply that editor for your column.

Similar to the demo, you need to create an Editor widget (or simple object) that wraps Quill and exposes getValue/setValue/isValid/focus, then set column.editor to that instance.

Also see the docs for CellEdit to get more info about it.

[jintech]

Hey,

We tried implementing the quill editor on our description field but we are having some issues specifically with some field and alignment

1. this.input.id is returning undefined.
2. The UI alignment is not as expected. Ideally the column should adjust to show the editor in a proper way just like tinyMCE
   	class QuillField extends RichTextField.mixin(Delayable) {
   	    static $name = 'QuillField';
   	    static type = 'quillfield';
   
   quill;
   quillToolbarOptions;
   
   construct(config = {}) {
       super.construct(config);
   
       // define toolbar options
       this.quillToolbarOptions = {
           container: [
               [{ header: [1, 2, 3, 4, false] }],
               ['bold', 'italic', 'underline'],
               [{ color: [] }],
               [{ align: [] }],
               [{ list: 'ordered' }, { list: 'bullet' }],
               [{ indent: '-1' }, { indent: '+1' }],
               ['clean'],
               ['link', 'image', 'video', 'attachment', 'expand']
           ],
           handlers: {
               attachment: quill_upload_attachment_handler,
               expand: () => {
                   this.quillEditor.expandQuillModal(
                       this.value,
                       '#' + this.input.id,
                       this.dataObj,
                       $('#quill_upload_data_module').val(),
                       '#saveTask',
                       this.placeholder,
                       this.isReadOnly,
                       this.isImageUploadAllowed,
                       this.isVideoUploadAllowed,
                       this.isAttachmentAllowed
                   );
               }
           }
       };
   
       // set default values for params
       this.dataObj = {
           parentContainer: "<% quill_upload_data.parentContainer %>",
           document_id: "<% quill_upload_data.document_id %>",
           sub_module: "<% quill_upload_data.sub_module %>",
           sub_module_id: "<% quill_upload_data.sub_module_id %>",
           asset_type: "<% rich_text_editor_asset_type_id %>",
           overwrite_current_version_requested: "0",
           column_headers: []
       };
   
       this.placeholderText = '';
       this.isReadOnly = false;
       this.isImageUploadAllowed = true;
       this.isVideoUploadAllowed = true;
       this.isAttachmentAllowed = true;
       
       GlobalEvents.ion({
               theme   : 'destroyEditor',
               thisObj : this
          });
       	
   
       // render after the input exists
       this.on('paint', this.renderQuill, this);
   }
   
   renderQuill() {
       if (this.quill || !this.input) return;
   
       if (!this.input.id) {
   	    this.input.id = 'quill_' + Math.random().toString(36).substr(2, 9);
   	}
   
       this.quill = quillEditor.renderQuillEditor(
           this.value || '',
           '#' + this.input.id,
           this.dataObj,
           $('#quill_upload_data_module').val(),
           '#saveTask',
           this.quillToolbarOptions,
           this.placeholderText,
           this.isReadOnly,
           this.isImageUploadAllowed,
           this.isVideoUploadAllowed,
           this.isAttachmentAllowed
       );
   
       this.quill.on('text-change', () => {
           this.value = this.quill.root.innerHTML;
       });
   }
   
   updateValue(value, ...args) {
       super.updateValue(value, ...args);
       if (!this.inputting && this.quill) {
           this.quill.root.innerHTML = value || '';
       }
   }
   
   doDestroy() {
       this.destroyEditor();
       super.doDestroy();
   }
   
   destroyEditor() {
       if (this.quill) {
           this.quill.off && this.quill.off('text-change');
           this.quill = null;
       }
       this.detachListeners('popup-hide');
   }
   	}
   
   QuillField.initClass();
   
   

   Column config:
   id: "ecm_description",
   				text: "<% l('Description', [], current_user.ui_language) %>",
   				field: 'ecm_description',
   				type: 'widget',
   				flex: 1,
   				autoHeight: true,
   				revertOnEscape : false,
   				cellEditor     : {
   					matchSize : {
   						height : false
   					}
   				},
   				editable: true,
   				editor : { type : 'quillfield' }
   

   quillEditor object:

   

   quillEditor.png (23.16 KiB) Viewed 1399 times

   

   quill_editor UI.png (45.94 KiB) Viewed 1388 times

[tasnim]

I've implemented Quill Rich Text editor in the tiny-mce Bryntum-Grid demo and wrapped it in a CodePen here https://codepen.io/dv-auntik/pen/LENWyja?editors=0010

Here is a small Demo GIF

chrome_Bz7NxitT9K.gif (1.02 MiB) Viewed 1370 times