Custom Rich Text Editor is not working
Question
Hi @artf, I've just created a custom plugin of the RTE using different libraries like CKEditor 5, TinyMCE 4 or pell but all of them with the same result that the editor is losing the focus so the buttons are not applying to the text content.

So on the image above if I press on Bold button then the effect is not applied to the content.
enable: function(el, rte){
// If already exists just focus
if (rte) {
this.focus(el, rte); // implemented later
return rte;
}
let rteToolbar = editor.RichTextEditor.getToolbarEl();
[].forEach.call(rteToolbar.children, (child) => {
child.style.display = 'none';
});
el.contentEditable = true;
// Init Pell
rte = window.pell.init({
element: el,
onChange: function (html) {
//console.log(html);
}
});
el.focus();
rte.focus();
return rte;
},
I think all my problem is on the enable function but I don't know why is happening this behaviour. Do you have any clue?
If I fix it then it will be really simple to include the 3 different plugins.
Answers (3)
To be honest, I don't know but maybe this happening because by clicking outside you're unfocusing from the input, indeed, you should probably append those buttons inside rteToolbar which has this listener on(rteToolbar, 'mousedown', e => e.stopPropagation()); and so prevents from blur
How you solve this? i can't find a working example with Pell, CKEditor 5 or TinyMCE :/
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1696
Traits appear first time when draged custom component
Hi artf , i have created custom component and add traits for it , when dragging this component to editor and select it the setting traits w...
Issue #1804
Applying two different traits on same html tag but applies only one
Hello @artf , If we need to initialize two traits on same HTML tag then it's possible or not? Actually i define two different traits on sam...
Issue #1493
[QUESTION] render() works on the first time but not on subsequent calls
Hello, I've created a custom component that shows images using background-image on a <div> instead of using an <img> element. It's mostly w...
Issue #1458
Embeded Jquery events in the grapesjs editor not working as expected.
@artf , I tried to embed my template into the grapesjs editor. The issue am getting is the editor not working as expected with that templat...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.