CKeditor Inline integrado no editor GrapesJS

Aug 20 2020

Estou trabalhando em um aplicativo de editor em que GrapesJS é implementado. Seu editor e recurso estão funcionando bem. Eu integrei o CKeditor embutido ao editor GrapesJS e ele tem poucos problemas.

Várias opções de edição embutida estão sendo exibidas
Às vezes, as opções do editor não estão posicionadas corretamente
Problema principal : as opções embutidas estão aparecendo, mas não refletem no texto selecionado. Quer dizer, podemos clicar nessas opções embutidas para formatar o conteúdo do editor, mas isso não é refletido no editor.

Aqui estou compartilhando alguns códigos escritos:

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: 1,
    height: '100%',
    storageManager: { type: 0 },
    plugins: ['gjs-plugin-ckeditor']
});

editor.setCustomRte({
    enable: function(el, rte) {
        // If already exists just focus
        if (rte) {
            this.focus(el, rte); // implemented later
            return rte;
        }
    
        // CKEditor initialization
        rte = CKEDITOR.inline(el, {
            // Your configurations...
            toolbar: [
                { name: 'styles', items: ['Font', 'FontSize' ] },
                ['Bold', 'Italic', 'Underline', 'Strike'],
                {name: 'paragraph', items : [ 'NumberedList', 'BulletedList']},
                {name: 'links', items: ['Link', 'Unlink']},
                {name: 'colors', items: [ 'TextColor', 'BGColor' ]},
            ],
            uiColor: '#9AB8F3', // Inline editor color
            startupFocus: true,
            extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
            allowedContent: true, // Disable auto-formatting, class removing, etc.
            enterMode: CKEDITOR.ENTER_BR,
            // extraPlugins: 'sharedspace,justify,colorbutton,panelbutton,font',
            
            // sharedSpaces: {
            //  top: editor.RichTextEditor.getToolbarEl(),
            // }
        });
    
        this.focus(el, rte); // implemented later
        return rte;
    },
    focus(el, rte) {
        // Do nothing if already focused
        if (rte && rte.focusManager.hasFocus) {
            return;
        }
        el.contentEditable = true;
        rte && rte.focus();
    },
    disable(el, rte) {
        el.contentEditable = false;
        if (rte && rte.focusManager)
            rte.focusManager.blur(true);
    }
});

Aqui está o JSFiddle, onde você pode verificar o funcionamento e o código.

Versão:

uvasjs - 0,16,18

ckeditor - padrão - 4.14.1

Qual é o comportamento esperado?

Ao aplicar as opções de formatação embutidas das opções embutidas do CKeditor, elas devem refletir no texto selecionado.

Descreva o bug em detalhes:

Eu integrei o CKeditor no editor vineJS para fins de edição embutida. Atualmente, quando eu seleciono o texto para formatá-lo, as opções embutidas do CKeditor são exibidas junto com outras poucas opções em uma barra de ferramentas preta. Estou confuso com isso. E o principal problema é que mesmo eu use qualquer uma das opções de formatação embutida, a formatação não está refletindo no texto selecionado. Não é possível fazer nada com a opção inline do CKeditor, como formatação de texto, lista, uploads de imagem, link, etc.

Qual é o comportamento atual?

O principal problema é que mesmo eu usando qualquer uma das opções embutidas, a formatação não está refletindo no texto selecionado. Não é possível fazer nada com a opção inline do CKeditor, como formatação de texto, lista, uploads de imagem, link, etc.

Respostas

4 Sinto Sep 02 2020 at 13:42

Como você vê, não recebo nenhuma resposta do SO. Também relatei esse problema no Github, onde vi respostas de problemas semelhantes. Depois de alguns dias, recebi uma resposta e funcionou bem para mim. Portanto, gostaria de compartilhar essa resposta com todos vocês, que pode ser útil para alguém como eu.

Meu primeiro problema: várias opções de edição embutida estão aparecendo

O plugin GrapesJS CKEditor já registra o CKEditor como um RTE customizado, portanto, chamar editor.setCustomRteé na verdade configurá-lo duas vezes.

Eu removi o editor.setCustomRtebloco e funcionou bem. Se você deseja fornecer opções do CKEditor, isso deve ser feito no pluginsOptsnível mostrado aqui .

Aqui está meu segundo problema: às vezes, as opções do editor não estão posicionadas corretamente

Isso também foi corrigido após a remoção do editor.setCustomRtebloco.

E, o último e principal problema que enfrentei durante a integração: a formatação embutida não reflete no texto selecionado

O plugin GrapesJS CKEditor depende da versão Standard-All CKEditor , não usando a versão Standard CKEditor . Usarhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js vai consertar.

Aqui está um violino que você pode consultar para integração CKEditor Inline com GrapesJS

Uma observação extra : eu enfrentei outro problema depois de remover o editor.setCustomRtebloqueio - que foi a correção do meu primeiro problema. Parece:

ckeditor.js:270 Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "sharedspace" was not found at "https://cdn.ckeditor.com/4.14.1/standard/plugins/sharedspace/plugin.js?t=K5H9".
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:270)
    at e (ckeditor.js:265)
    at Array.x (ckeditor.js:265)
    at w (ckeditor.js:265)
    at HTMLScriptElement.CKEDITOR.env.ie.e.$.onerror (ckeditor.js:266)

Se algum de vocês enfrentar um erro semelhante, observe que é por causa do tipo / versão do CKEditor que você está usando. Eu estava usando a versão CKEditor padrão e esse era o problema. Depois de mudar para a versão Standard-All CKEditor , o problema foi resolvido.