CKeditor sebaris terintegrasi dalam editor GrapesJS

Aug 20 2020

Saya bekerja di aplikasi editor tempat GrapesJS diimplementasikan. Editor dan fiturnya berfungsi dengan baik. Saya telah mengintegrasikan CKeditor inline ke editor GrapesJS dan memiliki sedikit masalah.

Beberapa opsi edit sebaris ditampilkan
Terkadang opsi editor tidak ditempatkan dengan benar
Masalah utama : Opsi sebaris ditampilkan tetapi tidak tercermin dalam teks yang dipilih. Maksud saya, kita dapat mengklik opsi sebaris tersebut untuk memformat konten editor tetapi itu tidak tercermin dalam editor.

Di sini saya membagikan beberapa kode yang ditulis:

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

Inilah JSFiddle tempat Anda dapat memeriksa kerja & kode.

Versi: kapan:

grapesjs - 0.16.18

ckeditor - standar - 4.14.1

Apa perilaku yang diharapkan?

Saat menerapkan opsi pemformatan sebaris dari opsi CKeditor sebaris, itu harus tercermin dalam teks yang dipilih.

Jelaskan detail bug:

Saya telah mengintegrasikan CKeditor di editor grapesJS untuk tujuan pengeditan inline. Saat ini, ketika saya memilih teks untuk memformatnya, opsi CKeditor sebaris ditampilkan bersama dengan beberapa opsi lain di bilah alat hitam. Saya bingung tentang itu. Dan masalah utamanya adalah bahwa meskipun saya menggunakan salah satu opsi pemformatan sebaris, pemformatannya tidak mencerminkan teks yang dipilih. Tidak dapat melakukan apa pun dari opsi sebaris CKeditor seperti pemformatan teks, daftar, unggahan gambar, tautan, dll ..

Bagaimana perilaku saat ini?

Masalah utamanya adalah bahwa meskipun saya menggunakan salah satu opsi sebaris, pemformatannya tidak mencerminkan teks yang dipilih. Tidak dapat melakukan apa pun dari opsi sebaris CKeditor seperti pemformatan teks, daftar, unggahan gambar, tautan, dll ..

Jawaban

4 Sinto Sep 02 2020 at 13:42

Seperti yang Anda lihat, saya tidak mendapat tanggapan dari SO. Saya juga melaporkan masalah ini di Github di mana saya telah melihat tanggapan dari masalah serupa. Setelah beberapa hari, saya mendapat tanggapan & itu berfungsi dengan baik untuk saya. Jadi saya ingin membagikan tanggapan itu kepada Anda semua, yang mungkin dapat membantu orang lain seperti saya.

Masalah pertama saya: Beberapa opsi edit sebaris ditampilkan

The GrapesJS CKEditor Plugin sudah register CKEditor sebagai kustom RTE, sehingga memanggil editor.setCustomRtesebenarnya pengaturannya dua kali.

Saya telah menghapus editor.setCustomRteblok & berfungsi dengan baik. Jika Anda ingin memberikan opsi CKEditor, ini harus dilakukan pada pluginsOptslevel seperti yang ditunjukkan di sini .

Ini masalah kedua saya: Terkadang opsi editor tidak ditempatkan dengan benar

Ini juga diperbaiki setelah menghapus editor.setCustomRteblok.

Dan, masalah terakhir & utama yang saya hadapi saat integrasi: Pemformatan sebaris tidak mencerminkan teks yang dipilih

Plugin GrapesJS CKEditor bergantung pada versi Standard-All CKEditor , tidak menggunakan versi Standard CKEditor . Menggunakanhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js itu akan diperbaiki.

Berikut adalah biola yang berfungsi yang dapat Anda rujuk untuk integrasi CKEditor Inline dengan GrapesJS

Catatan tambahan : Saya menghadapi masalah lain setelah menghapus editor.setCustomRteblok - yang merupakan perbaikan dari masalah pertama saya. Sepertinya:

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)

Jika ada di antara Anda yang menghadapi kesalahan serupa, perhatikan bahwa itu karena jenis / versi CKEditor yang Anda gunakan. Saya menggunakan versi CKEditor Standar & itulah masalahnya. Setelah mengubahnya ke versi Standard-All CKEditor , masalah telah teratasi.