react-app-starterkit
react-app-starterkit copied to clipboard
Content component with CKEditor5 (Some CKEditor 5 modules are duplicated)
I created a package for my project from https://ckeditor.com/ckeditor-5/online-builder/ Use with package.json file
"dependencies": {
"@ckeditor/ckeditor5-react": "^5.0.2",
"ckeditor5-custom-build": "file:./packages/ckeditor5-custom-build",
"@formio/contrib": "^2.0.0",
"@formio/react": "^5.3.0-rc.2"
}
Error because CKEditor has already rendered And Warning: ace.js:1 misspelled option "isUseWorkerDisabled" And Sometimes errors Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.form.io/ace/1.4.12/worker-json.js' failed to load.
import './eform.scss';
import { FormBuilder, Formio } from '@formio/react';
import React, { FC } from 'react';
import FormioContrib from "@formio/contrib";
Formio.use(FormioContrib);
interface IEFormBuilderPage {
form?: any
onChange: (value: any) => void
}
const EFormBuilderPage: FC<IEFormBuilderPage> = ({ form, onChange }) => {
const onFormChange = (schema: any) => {
onChange({ ...schema, components: [...schema.components] });
};
return form ? <Isolate>
<FormBuilder
form={form}
onChange={onFormChange}
options={{
builder: {
resource: false,
advanced: false,
premium: false,
layout: {
components: {
table: true
}
},
data: false,
basic: {
components: {
checkmatrix: false
}
}
}
}}/>
</Isolate> : <></>
}
class Isolate extends React.Component {
shouldComponentUpdate() {
return false // prevent parent state changes from re-rendering FormBuilder
}
render() {
return <React.Fragment>
{this.props.children}
</React.Fragment>
}
}
export default EFormBuilderPage;