GrapesJS editörüne entegre edilmiş Inline CKeditor

Aug 20 2020

GrapesJS'nin uygulandığı bir editör uygulamasında çalışıyorum. Düzenleyicisi ve özelliği iyi çalışıyor. Inline CKeditor'ı GrapesJS editörüne entegre ettim ve birkaç sorunu var.

Birden çok satır içi düzenleme seçeneği gösteriliyor
Bazen düzenleyici seçenekleri doğru konumlandırılmıyor
Ana konu : Satır içi seçenekleri gösteriyoruz ama o yansıtan değil , seçilen metinde. Demek istediğim, düzenleyici içeriğini biçimlendirmek için bu satır içi seçeneklere tıklayabiliriz, ancak düzenleyicide yansıtılmaz.

Burada yazılmış birkaç kodu paylaşıyorum:

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

İşte JSFiddle , çalışma ve kodu kontrol edebileceğiniz yer.

Versiyon:

grapesjs - 0.16.18

editör - standart - 4.14.1

Beklenen davranış nedir?

Satır içi CKeditor seçeneklerinden satır içi formatlama seçeneklerini uygularken, seçilen metne yansıtması gerekir.

Ayrıntılı hatayı açıklayın:

Satır içi düzenleme amacıyla CKeditor'u grapesJS editörüne entegre ettim. Şu anda, biçimlendirmek için metni seçtiğimde, satır içi CKeditor seçenekleri siyah bir araç çubuğunda başka birkaç seçenekle birlikte görüntüleniyor. Kafam karıştı. Ve asıl sorun, satır içi formatlama seçeneklerinden herhangi birini kullansam bile, formatın seçilen metne yansımaması. CKeditor satır içi seçeneğinden metin biçimlendirme, liste, resim yüklemeleri, bağlantı vb. Gibi hiçbir şey yapılamaz.

Şu anki davranış nedir?

Ana sorun, satır içi seçeneklerden herhangi birini kullansam bile, biçimlendirmenin seçilen metne yansımamasıdır. CKeditor satır içi seçeneğinden metin biçimlendirme, liste, resim yüklemeleri, bağlantı vb. Gibi hiçbir şey yapılamaz.

Yanıtlar

4 Sinto Sep 02 2020 at 13:42

Gördüğünüz gibi SO'dan herhangi bir yanıt alamıyorum. Bu sorunu, benzer sorunların yanıtlarını gördüğüm Github'da da bildirdim. Birkaç gün sonra bir yanıt aldım ve bu benim için iyi çalıştı. Bu yüzden, benim gibi bir başkası için faydalı olabilecek bu cevabı hepinizle paylaşmak istiyorum.

İlk sorunum: Birden çok satır içi düzenleme seçeneği gösteriliyor

Eklentisi GrapesJS CKEditor zaten çağıran bir özel RTE olarak CKEditor kaydeder editor.setCustomRteaslında iki kez oluşturmaktadır.

editor.setCustomRteBloğu kaldırdım ve iyi çalıştı. CKEditor seçeneklerini sağlamak istiyorsanız, bu buradapluginsOpts gösterilen düzeyde yapılmalıdır .

İşte ikinci sorunum: Bazen düzenleyici seçenekleri doğru konumlandırılmıyor

Bu, editor.setCustomRteblok kaldırıldıktan sonra da düzeltildi .

Ve entegrasyon sırasında karşılaştığım son ve ana sorun: Seçilen metne yansımayan satır içi formatlama

GrapesJS CKEditor eklentisi Standard-All CKEditor versiyonuna bağlıdır , Standard CKEditor versiyonunu kullanmaz . Kullanımhttps://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js düzelecek.

İşte GrapesJS ile Inline CKEditor entegrasyonu için başvurabileceğiniz bir çalışma keman.

Ek bir not : editor.setCustomRteİlk sorunumun düzeltmesi olan bloğu kaldırdıktan sonra başka bir sorunla karşılaştım . Şöyle görünüyor:

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)

Herhangi biriniz benzer bir hatayla karşılaşırsa, bunun kullandığınız CKEditor türü / sürümü nedeniyle olduğunu unutmayın. Standart CKEditor sürümünü kullanıyordum ve sorun buydu . Bunu Standart-Tüm CKEditor sürümüne değiştirdikten sonra sorun çözüldü.