Issue #1296Opened July 18, 2018by jvillena0 reactions

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.

screen shot 2018-07-18 at 17 06 53

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)

artfJuly 20, 20180 reactions

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

jmtt89February 18, 20190 reactions

How you solve this? i can't find a working example with Pell, CKEditor 5 or TinyMCE :/

lock[bot]February 18, 20200 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.