Inline CKeditor รวมอยู่ในโปรแกรมแก้ไข GrapesJS

Aug 20 2020

ฉันกำลังทำงานในแอปพลิเคชันตัวแก้ไขที่มีการติดตั้ง GrapesJS ตัวแก้ไขและคุณสมบัติทำงานได้ดี ฉันได้รวม CKeditor แบบอินไลน์เข้ากับโปรแกรมแก้ไข GrapesJS แล้วและมีปัญหาเล็กน้อย

  1. กำลังแสดงตัวเลือกการแก้ไขแบบอินไลน์หลายรายการ
  2. บางครั้งตัวเลือกตัวแก้ไขไม่ได้อยู่ในตำแหน่งที่เหมาะสม
  3. ปัญหาหลัก : ตัวเลือกแบบอินไลน์แสดงขึ้น แต่ไม่แสดงในข้อความที่เลือก ฉันหมายความว่าเราสามารถคลิกตัวเลือกแบบอินไลน์เหล่านั้นเพื่อจัดรูปแบบเนื้อหาของตัวแก้ไขได้ แต่จะไม่ปรากฏในตัวแก้ไข

ฉันกำลังแบ่งปันรหัสบางส่วนที่เขียน:

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

นี่คือJSFiddleที่คุณสามารถตรวจสอบการทำงานและรหัสได้

เวอร์ชัน:

องุ่น - 0.16.18

ckeditor - มาตรฐาน - 4.14.1

พฤติกรรมที่คาดหวังคืออะไร?

ในขณะที่ใช้ตัวเลือกการจัดรูปแบบแบบอินไลน์จากตัวเลือก CKeditor แบบอินไลน์ควรแสดงในข้อความที่เลือก

อธิบายข้อบกพร่องโดยละเอียด:

ฉันได้รวม CKeditor ไว้ในตัวแก้ไข grapeJS เพื่อวัตถุประสงค์ในการแก้ไขแบบอินไลน์ ขณะนี้เมื่อฉันเลือกข้อความเพื่อจัดรูปแบบตัวเลือก CKeditor แบบอินไลน์จะปรากฏขึ้นพร้อมกับตัวเลือกอื่น ๆ ในแถบเครื่องมือสีดำ ฉันสับสนเกี่ยวกับเรื่องนั้น และปัญหาหลักคือถึงแม้ฉันจะใช้ตัวเลือกการจัดรูปแบบอินไลน์ใด ๆ การจัดรูปแบบก็ไม่สะท้อนในข้อความที่เลือก ไม่สามารถทำอะไรได้จากตัวเลือก CKeditor แบบอินไลน์เช่นการจัดรูปแบบข้อความรายการการอัปโหลดรูปภาพลิงก์ ฯลฯ ..

พฤติกรรมปัจจุบันเป็นอย่างไร?

ปัญหาหลักคือแม้ว่าฉันจะใช้ตัวเลือกแบบอินไลน์ใด ๆ แต่การจัดรูปแบบก็ไม่สะท้อนในข้อความที่เลือก ไม่สามารถทำอะไรได้จากตัวเลือก CKeditor แบบอินไลน์เช่นการจัดรูปแบบข้อความรายการการอัปโหลดรูปภาพลิงก์ ฯลฯ ..

คำตอบ

4 Sinto Sep 02 2020 at 13:42

อย่างที่คุณเห็นฉันไม่ได้รับคำตอบใด ๆ จาก SO ฉันได้รายงานปัญหานี้ใน Github ด้วยซึ่งฉันได้เห็นการตอบสนองของปัญหาที่คล้ายกัน หลังจากผ่านไปสองสามวันฉันได้รับคำตอบและนั่นก็ใช้ได้ดีสำหรับฉัน ดังนั้นฉันต้องการแบ่งปันคำตอบนั้นกับคุณทุกคนซึ่งอาจเป็นประโยชน์สำหรับคนอื่น ๆ เช่นฉัน

ปัญหาแรกของฉัน: กำลังแสดงตัวเลือกการแก้ไขแบบอินไลน์หลายรายการ

GrapesJS CKEditor ปลั๊กอินแล้วลงทะเบียน CKEditor เป็นที่กำหนดเอง RTE จึงเรียกeditor.setCustomRteเป็นจริงตั้งขึ้นเป็นครั้งที่สอง

ฉันได้ลบeditor.setCustomRteบล็อกแล้วและใช้งานได้ดี หากคุณต้องการที่จะให้ตัวเลือก CKEditor นี้ควรจะทำที่pluginsOptsระดับดังแสดงที่นี่

นี่คือปัญหาที่สองของฉัน: บางครั้งตัวเลือกตัวแก้ไขไม่ได้อยู่ในตำแหน่งที่เหมาะสม

นอกจากนี้ยังได้รับการแก้ไขหลังจากลบeditor.setCustomRteบล็อก

และปัญหาสุดท้ายและหลักที่ฉันเผชิญขณะผสานรวม: การจัดรูปแบบแบบอินไลน์ไม่สะท้อนในข้อความที่เลือก

ปลั๊กอิน GrapesJS CKEditor จะขึ้นอยู่กับรุ่นมาตรฐานทั้งหมด CKEditorไม่ใช้รุ่นมาตรฐาน CKEditor ใช้https://cdn.ckeditor.com/4.14.1/standard-all/ckeditor.js มันจะแก้ไข

นี่คือซอที่ใช้งานได้ซึ่งคุณสามารถอ้างถึงการรวม Inline CKEditor กับ GrapesJS

หมายเหตุเพิ่มเติม : ฉันประสบปัญหาอื่นหลังจากลบeditor.setCustomRteบล็อกซึ่งเป็นการแก้ไขปัญหาแรกของฉัน ดูเหมือนว่า:

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)

หากคุณพบข้อผิดพลาดที่คล้ายกันโปรดทราบว่าเป็นเพราะประเภท / เวอร์ชัน CKEditor ที่คุณใช้อยู่ ฉันใช้Standard CKEditor เวอร์ชัน & นั่นคือปัญหา หลังจากเปลี่ยนเป็นเวอร์ชัน Standard-All CKEditorปัญหาได้รับการแก้ไขแล้ว

Grapedropเป็นเว็บไซต์ที่คุณสามารถสร้างบัญชีและตรวจสอบคุณสมบัติเกือบทั้งหมดของ GrapesJS

นี่คือรายการปลั๊กอินพิเศษที่ใช้ใน CKEditor:

dialogui,dialog,a11yhelp,dialogadvtab,basicstyles,bidi,blockquote,
notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,
colorbutton,colordialog,templates,menu,contextmenu,copyformatting,div,
resize,elementspath,enterkey,entities,exportpdf,popup,filetools,
filebrowser,find,fakeobjects,flash,floatingspace,listblock,richcombo,font,
forms,format,horizontalrule,htmlwriter,iframe,wysiwygarea,image,indent,
indentblock,indentlist,smiley,justify,menubutton,language,link,list,
liststyle,magicline,maximize,newpage,pagebreak,pastetext,pastetools,
pastefromgdocs,pastefromword,preview,print,removeformat,save,selectall,
showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,
tabletools,tableselection,undo,lineutils,widgetselection,widget,
notificationaggregator,uploadwidget,uploadimage,wsc

ตัวเลือกแถบเครื่องมือที่กำหนดเอง CKEditor แบบอินไลน์เพิ่มตามที่คุณต้องการ