Inline CKeditor zintegrowany z edytorem GrapesJS

Aug 20 2020

Pracuję w aplikacji edytora, w której zaimplementowano GrapesJS. Jego edytor i funkcja działają dobrze. Zintegrowałem wbudowany CKeditor z edytorem GrapesJS i ma kilka problemów.

Wyświetlanych jest wiele opcji edycji bezpośredniej
Czasami opcje edytora nie są prawidłowo ustawione
Główny problem : opcje wbudowane są wyświetlane, ale nie są odzwierciedlone w zaznaczonym tekście. Chodzi mi o to, że możemy kliknąć te opcje w wierszu, aby sformatować zawartość edytora, ale nie jest to odzwierciedlone w edytorze.

Tutaj udostępniam kilka napisanych kodów:

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);
    }
});

Oto JSFiddle, w którym możesz sprawdzić działanie & kod.

Wersja:

winogrona - 0,16,18

ckeditor - standard - 4.14.1

Jakie jest oczekiwane zachowanie?

Stosując opcje formatowania wbudowanego z opcji wbudowanego CKeditora, powinno to odzwierciedlać zaznaczony tekst.

Opisz szczegółowo błąd:

Zintegrowałem CKeditor w edytorze grapesJS w celu edycji bezpośredniej. Obecnie, gdy zaznaczam tekst do sformatowania, opcje wbudowanego edytora CKeditor są wyświetlane wraz z kilkoma innymi opcjami na czarnym pasku narzędzi. Jestem zdezorientowany. A głównym problemem jest to, że nawet ja używam którejkolwiek z opcji formatowania wbudowanego, formatowanie nie odzwierciedla zaznaczonego tekstu. Nie można nic zrobić za pomocą opcji wbudowanej CKeditor, na przykład formatowania tekstu, listy, przesyłania obrazów, linków itp.

Jakie jest obecne zachowanie?

Głównym problemem jest to, że nawet ja używam którejkolwiek z opcji wbudowanych, formatowanie nie jest odzwierciedlone w zaznaczonym tekście. Nie można nic zrobić za pomocą opcji wbudowanej CKeditor, na przykład formatowania tekstu, listy, przesyłania obrazów, linków itp.

Odpowiedzi

4 Sinto Sep 02 2020 at 13:42

Jak widać, nie otrzymuję żadnej odpowiedzi od SO. Zgłosiłem również ten problem na Github, gdzie widziałem odpowiedzi na podobne problemy. Po kilku dniach otrzymałem odpowiedź i to działało dobrze. Dlatego chcę się z wami wszystkimi podzielić tą odpowiedzią, która może być pomocna dla kogoś takiego jak ja.

Mój pierwszy problem: wyświetlanych jest wiele opcji edycji bezpośredniej

GrapesJS CKEditor plugin już rejestruje CKEditor jako zwyczaj RTE, więc nazywając editor.setCustomRterzeczywiście ustawienie go dwukrotnie.

Usunąłem editor.setCustomRteblok i działało dobrze. Jeśli chcesz udostępnić opcje CKEditor, należy to zrobić na pluginsOptspoziomie pokazanym tutaj .

Oto mój drugi problem: czasami opcje edytora nie są ustawione prawidłowo

Zostało to również naprawione po usunięciu editor.setCustomRtebloku.

I ostatni i główny problem, z jakim się spotkałem podczas integracji: formatowanie inline nie odzwierciedla zaznaczonego tekstu

Wtyczka GrapesJS CKEditor jest zależna od wersji Standard-All CKEditor i nie używa wersji Standard CKEditor . Posługiwać sięhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js to naprawi.

Oto działające skrzypce, które możesz polecić do integracji Inline CKEditor z GrapesJS

Dodatkowa uwaga : po usunięciu editor.setCustomRtebloku napotkałem inny problem - który był poprawką mojego pierwszego problemu. To wygląda jak:

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)

Jeśli któryś z was napotka podobny błąd, zauważ, że jest to spowodowane typem / wersją CKEditor, której używasz. I był przy użyciu wersji standard CKEditor i to był problem. Po zmianie na wersję Standard-All CKEditor problem został rozwiązany.