Open fahry-mohammed opened 4 months ago
Same issue. Any updates?
Jodit.make('#editor', { controls: { paragraph: { list: Jodit.atom({ p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', h4: 'Heading 4', h5: 'Heading 5', h6: 'Heading 6', blockquote: 'Quote', div: 'Div', pre: 'Source code' }) } } });
How to use Jodit.atom in Jodit-react?
@fahry-mohammed @topdev0215 Hi, second example https://xdsoft.net/jodit/docs/modules/plugins_format_block.html#root
Jodit.make('#editor', { controls: { paragraph: { list: Jodit.atom({ p: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3', h4: 'Heading 4', h5: 'Heading 5', h6: 'Heading 6', blockquote: 'Quote', div: 'Div', pre: 'Source code' }) } } });
How to use Jodit.atom in Jodit-react?
import JoditEditor, { Jodit } from 'jodit-react';
@xdan Solved!!! Thanks so muchđź‘Ť
I've got another issue.
I am using NextJS in in my project.
This error occurred during import { Jodit }
ReferenceError: self is not defined
This is my code.
import React, { useState, useEffect, useRef, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { Jodit } from 'jodit-react'; // The problem is here
// Using dynamic import of Jodit component as it can't render server-side
const JoditEditor = dynamic(() => import('jodit-react'), { ssr: false });
const Editor = ({ editorContent, setChangedContent, section, setSection }) => {
const editor = useRef(null);
// Check if the content is loaded perfectly
const [isBrowser, setIsBrowser] = useState(false);
// Value of the Editor
const [model, setModel] = useState('');
useEffect(() => {
setIsBrowser(true);
}, []);
useEffect(() => {
setModel(editorContent ? editorContent.outerHTML : '');
setChangedContent(editorContent ? editorContent.outerHTML : '');
try {
const sectionTitleElement = editorContent.parentNode.getElementsByTagName('h2')[0];
if (sectionTitleElement?.id !== 'title') {
setSection(sectionTitleElement.textContent);
}
} catch (e) {
console.log('Please select the correct section');
}
}, [editorContent]);
const handleModelChange = (value) => {
setChangedContent(value);
setModel(value);
};
const options = useMemo(
() => [
'paragraph', '|',
'bold',
'underline',
'italic', '|',
'brush',
'image',
'table',
'link', '|',
'undo', 'redo', '|',
'eraser',
],
[]
);
const config = useMemo(
() => ({
readonly: false,
placeholder: 'Edite aquĂ su contenido!',
defaultActionOnPaste: 'insert_as_html',
defaultLineHeight: 1.5,
enter: 'p',
buttons: options,
buttonsMD: options,
buttonsSM: options,
buttonsXS: options,
statusbar: false,
sizeLG: 900,
sizeMD: 700,
sizeSM: 400,
language: 'es', // Changed to ISO language code 'es' for Spanish
colors: ['#159957', '#f2f2f2', '#fcf9e7'],
uploader: {
insertImageAsBase64URI: true,
imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp']
},
allowTabNavigation: true, // Boolean values should not be commented out
controls: {
paragraph: {
list: Jodit.atom({
h2: 'TĂtulo 1',
h3: 'TĂtulo 2',
h4: 'TĂtulo 3',
h5: 'Cuerpo',
h6: 'Texto recuadro',
blockquote: 'TĂtulo de Tabla/Figura',
div: 'Nota de Tabla/Figura',
})
}
}
}),
[options, Jodit]
);
return (
<div className="w-full h-full p-1">
<div className="flex justify-between">
<span className="font-semibold text-[30px]">{section}</span>
</div>
<form className="w-full h-full mt-5">
{isBrowser && (
<JoditEditor
ref={editor}
value={model}
config={config}
onChange={handleModelChange}
tabIndex={1}
className="w-full"
/>
)}
</form>
</div>
);
};
export default Editor;
Above code worked well without Jodit.atom
method in NextJS.
I found solution after much effort. If you have same issue you can solve this problem like this.
useEffect(() => {
setIsBrowser(true);
import('jodit-react').then((module) => {
module.Jodit.defaultOptions.controls.addWord = {
tooltip: 'Enter text and insert',
icon: 'pencil',
popup: (editor, current, self, close) => {
const form = editor.create.fromHTML(
`<form>
<input type="text"/>
<button type="submit">Insert</button>
</form>`
);
editor.e.on(form, 'submit', (e) => {
e.preventDefault();
editor.s.insertHTML(form.querySelector('input').value);
close();
});
return form;
}
};
})
}, []);
Jodit Version: 4.0.25 / 1.3.20
Browser: Chrome Is React App: True
Code
Expected behavior: The
fontsize
listed down as expected with 16, 18, 20 and 22. Same asfontsize
, I have configuredparagraph
and expected to show only listed types such asp: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3'
Actual behavior: Even tough the
paragraph
configuration limited top: 'Pharagraph', h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3'
, in the editor it shows additionally'Heading 4', 'Quote', 'Code'
.Screenshot of the behaviour: