Rich text editing in ParamQuery grid

While pqgrid includes built-in textarea and contenteditable editors for most common editing needs, there are times when rich text editing is required within the cells.
In this example, we utilize Summernote, a lightweight rich text editor, to edit HTML content within the cells.

Include the library css and js file.

<link rel="stylesheet" href="/summernote/summernote-lite.css" />
<script src="/summernote/summernote-lite.js"></script>

Key bindings:

Escape key is used to exit the editor without saving the changes.

Tab key is used to exit the editor after saving the changes.

if (evt.key == 'Escape') {
    grid.quitEditMode();
    grid.focus(ui);
}
else if (evt.key == 'Tab') {
    grid.saveEditCell();
    grid.quitEditMode();
}

Note: This example demonstrates how to integrate a third-party rich text editor into ParamQuery Grid. You can use any rich text editor of your choice instead of Summernote.

Few settings in order to make this work:

• set editModel.onBlur = '' so that the editor doesn't close unexpectedly.
• set column.dataType = 'html' for rich text editor columns.
• set column.editor.type = 'textarea' for rich text editor columns.
• call grid.enableSelection()