Text Area with CKEditor or Quill editor is not working when placed in Edit Grid
prathipatipraveen opened this issue · comments
Environment
- Vue-formio version: 5.0.0-rc.2
- Frontend framework: vue.js
- Vue version: ^3.3.4
- Browser: Firefox, Chrome
Steps to Reproduce
- Place an Edit Grid in the form.
- Add a Text Area with CKEditor to the Edit Grid
- Add form to the vue component and render it using the form JSON.
- Click on Add Another button of the Edit Grid and Enter text in the text area and format it and click on Save button of the Edit Grid.
Expected behavior
The Data should be persisted to the grid on clicking of Save button
Observed behavior
The control renders fine but when data is entered and clicked on Save button of the Edit Grid, getting the below error in console
This is the form schema
{
"components": [
{
"label": "Edit Grid",
"labelPosition": "top",
"description": "",
"tooltip": "",
"customClass": "",
"tabindex": "",
"openWhenEmpty": false,
"disableAddingRemovingRows": false,
"conditionalAddButton": "",
"hidden": false,
"hideLabel": false,
"autofocus": false,
"disabled": false,
"tableView": false,
"modalEdit": false,
"templates": {
"header": "<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <div class=\"col-sm-2\">{{ component.label }}</div>\n {% } %}\n {% }) %}\n </div>",
"row": "<div class=\"row\">\n {% util.eachComponent(components, function(component) { %}\n {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}\n <div class=\"col-sm-2\">\n {{ getView(component, row[component.key]) }}\n </div>\n {% } %}\n {% }) %}\n {% if (!instance.disabled) { %}\n <div class=\"col-sm-2\">\n <div class=\"btn-group pull-right\">\n <button class=\"btn btn-default btn-light btn-sm editRow\"><i class=\"{{ iconClass('edit') }}\"></i></button>\n {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n <button class=\"btn btn-danger btn-sm removeRow\"><i class=\"{{ iconClass('trash') }}\"></i></button>\n {% } %}\n </div>\n </div>\n {% } %}\n </div>",
"footer": ""
},
"rowClass": "",
"addAnother": "",
"modal": false,
"saveRow": "",
"removeRow": "Cancel",
"persistent": true,
"inlineEdit": false,
"protected": false,
"dbIndex": false,
"encrypted": false,
"redrawOn": "",
"clearOnHide": true,
"customDefaultValue": "",
"calculateValue": "",
"calculateServer": false,
"allowCalculateOverride": false,
"validateOn": "change",
"validate": {
"required": false,
"customMessage": "",
"custom": "",
"customPrivate": false,
"json": "",
"strictDateValidation": false,
"multiple": false,
"unique": false
},
"unique": false,
"rowDrafts": false,
"errorLabel": "",
"key": "editGrid",
"tags": [],
"properties": {},
"conditional": {
"show": null,
"when": null,
"eq": "",
"json": ""
},
"customConditional": "",
"logic": [],
"attributes": {},
"overlay": {
"style": "",
"page": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"type": "editgrid",
"input": true,
"placeholder": "",
"prefix": "",
"suffix": "",
"multiple": false,
"defaultValue": null,
"refreshOn": "",
"widget": null,
"showCharCount": false,
"showWordCount": false,
"allowMultipleMasks": false,
"tree": true,
"defaultOpen": false,
"components": [
{
"label": "Text Area",
"labelPosition": "top",
"placeholder": "",
"description": "",
"tooltip": "",
"prefix": "",
"suffix": "",
"widget": {
"type": "input"
},
"editor": "ckeditor",
"autoExpand": false,
"customClass": "",
"tabindex": "",
"autocomplete": "",
"hidden": false,
"hideLabel": false,
"showWordCount": false,
"showCharCount": false,
"autofocus": false,
"spellcheck": true,
"disabled": false,
"tableView": true,
"modalEdit": false,
"multiple": false,
"persistent": true,
"inputFormat": "html",
"protected": false,
"dbIndex": false,
"case": "",
"encrypted": false,
"redrawOn": "",
"clearOnHide": true,
"customDefaultValue": "",
"calculateValue": "",
"calculateServer": false,
"allowCalculateOverride": false,
"validateOn": "change",
"validate": {
"required": false,
"pattern": "",
"customMessage": "",
"custom": "",
"customPrivate": false,
"json": "",
"minLength": "",
"maxLength": "",
"minWords": "",
"maxWords": "",
"strictDateValidation": false,
"multiple": false,
"unique": false
},
"unique": false,
"errorLabel": "",
"key": "textArea2",
"tags": [],
"properties": {},
"conditional": {
"show": null,
"when": null,
"eq": "",
"json": ""
},
"customConditional": "",
"logic": [],
"fixedSize": true,
"overlay": {
"style": "",
"page": "",
"left": "",
"top": "",
"width": "",
"height": ""
},
"attributes": {},
"type": "textarea",
"rows": 3,
"wysiwyg": false,
"input": true,
"refreshOn": "",
"allowMultipleMasks": false,
"mask": false,
"inputType": "text",
"inputMask": "",
"id": "eadmfhj",
"defaultValue": null
}
],
"id": "etpezo2"
}
],
"display": "form",
"page": 0,
"numPages": 1
}
Here is the vue component
<script>
import { Form } from '@formio/vue';
import schema from '@/services/input' // this file has the above schema
export default {
components: {
Form,
},
data() {
return {
formSchema: "",
options: {}
};
},
async created() {
this.formSchema = schema;
}
}
</script>
<template>
<div>
<Form :form="formSchema"></Form>
</div>
</template>
When using Quill editor instead of CKEditor you cannot format the data but clicking on Save button will update that data in the grid. In the console you get the below error when you try to format the data using Quill editor
