Hello, I have one error with Editor component.
Type error: 'Editor' cannot be used as a JSX component.
Its instance type 'Editor' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' but required in type 'ReactPortal'.
import React from "react"
import { Editor } from "@tinymce/tinymce-react"
const TinyMceEditField = ({ onChange, value, id }) => {
const handleEditorChange = (editor) => onChange(editor)
let tinyMCE
const myFileBrowser = (callback, win, field_name) => {
if (tinyMCE != null) {
const cmsURL = window.location.origin + "/admin/filesBrowsers?type=" + field_name.filetype
let searchString = window.location.search
if (searchString.length < 1) {
searchString = "?"
}
var body = document.body,
html = document.documentElement
var height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
)
var width = Math.max(
body.scrollWidth,
body.offsetWidth,
html.clientWidth,
html.scrollWidth,
html.offsetWidth
)
tinyMCE.windowManager.openUrl(
{
title: "Explorateur de fichiers",
url: cmsURL + searchString,
width: width * 0.8,
height: height * 0.8,
buttons: [],
onMessage: function (api, data) {
if (data.mceAction === "customAction") {
callback(data.url, { text: data.title, title: data.title, alt: data.name })
api.close()
}
},
},
{
window: win,
input: field_name,
resizable: "yes",
inline: "yes",
editor_id: tinyMCE.editorId,
}
)
}
return false
}
return (
<div>
<Editor
id={id}
apiKey={process.env.NEXT_PUBLIC_TINY_MCE_KEY}
init={{
image_title: true,
height: 500,
menubar: true,
spellchecker_language: "fr",
language: "fr_FR",
language_url: "/tinymce/fr_FR.js",
file_picker_callback: myFileBrowser,
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste code help wordcount ",
],
toolbar:
"undo redo | formatselect | bold italic forecolor backcolor | " +
"alignleft aligncenter alignright alignjustify lineheight | " +
"bullist numlist outdent indent | removeformat | help",
lineheight_formats: "0.05 0.15 0.25 0.5 1 1.1 1.2 1.3 1.4 1.5 2 2.5 3 3.5 4 4.5 5 5.5 6",
block_formats:
"Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre",
color_map: [
"#BFEDD2",
"Light Green",
"#FBEEB8",
"Light Yellow",
"#F8CAC6",
"Light Red",
"#ECCAFA",
"Light Purple",
"#C2E0F4",
"Light Blue",
"#2DC26B",
"Green",
"#F1C40F",
"Yellow",
"#E03E2D",
"Red",
"#B96AD9",
"Purple",
"#3598DB",
"Blue",
"#169179",
"Dark Turquoise",
"#E67E23",
"Orange",
"#BA372A",
"Dark Red",
"#843FA1",
"Dark Purple",
"#236FA1",
"Dark Blue",
"#ECF0F1",
"Light Gray",
"#CED4D9",
"Medium Gray",
"#95A5A6",
"Gray",
"#7E8C8D",
"Dark Gray",
"#34495E",
"Navy Blue",
"#000000",
"Black",
"#ffffff",
"White",
"#dc3545",
"Rouge Axa",
"#034ea2",
"Bleu Axa",
"#ffcb05",
"Jaune Axa",
],
relative_urls: false,
convert_urls: false,
remove_script_host: false,
setup: function (editor) {
tinyMCE = editor
},
content_style:
"ul{margin: 0;}p{margin: 0;}h1{font-size:2em;font-weight:700;margin:0}h2{font-size:1.5em;font-weight:700;margin: 0;color: #516190;}h3{font-size:1.17em;font-weight:700;margin:0}h4{font-size:1em;font-weight:700;margin:0}h5{font-size:.83em;font-weight:700;margin:0}h6{font-size:.67em;font-weight:700;margin: 0}",
}}
value={value}
onEditorChange={handleEditorChange}
/>
</div>
)
}
export default TinyMceEditField
Thank for futur help.
Hello, I have one error with Editor component.
Type error: 'Editor' cannot be used as a JSX component.
Its instance type 'Editor' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<{ ref: RefObject; id: string; }, string | JSXElementConstructor>' but required in type 'ReactPortal'.
Thank for futur help.