3

Requirement: Create a plugin that should have a button in the toolbar, On click should open a popup window which is a react component defined outside the plugin component.

export default class OpenPopup extends Plugin {
    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('openPopup', locale => {
            const view = new ButtonView(locale);
            view.set({
                label: 'Open Popup model',
                icon: popupImage,
                tooltip: true
            });

            // Callback executed once the button is clicked.
            view.on('execute', () => {
                
            });

            return view;
        });
    }
}

Popup code


import React, { useEffect, useState } from 'react';
import PropTypes from "prop-types";
import { Modal } from 'react-bootstrap';
const Popup= ({ show = false }) => {
    
    return (
            <Modal
                size="xl"
                show={show}
                dialogClassName="add-media-modal"
                onHide={()=> {show = false}}
            >
                <Modal.Header>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Add Media
                    </Modal.Title>
                    <button type="button" className="btn btn-primary btn-sm" onClick={handleCloseModal}>X</button>
                </Modal.Header>
                <Modal.Body>
                      
                </Modal.Body>
                <Modal.Footer>
                   
                    <button
                        type="button" className="btn btn-primary btn-sm"
        
                    >
                        Add
                    </button>
                </Modal.Footer>
            </Modal>
    )
}

Popup.propTypes = {
    show: PropTypes.bool
};

export default Popup

I was looking for various options or solutions to the above requirement.

Surya Kavutarapu
  • 136
  • 9
  • I am trying to solve this same issue. If you look at Step 3 of CKEditor's [Creating a simple plugin tutorial](https://ckeditor.com/docs/ckeditor5/latest/framework/guides/plugins/creating-simple-plugin.html#step-3-registering-a-button), it shows an example using the browser's `prompt()`. I'm wondering if React [Portals](https://reactjs.org/docs/portals.html) might work, or if a [Context](https://reactjs.org/docs/context.html) solution might be required (set a global context variable for the modal using the `execute` callback, listen for that in the Modal). – ty2k Jan 07 '22 at 22:19
  • 1
    This question's author uses an alternate approach, moving the logic out of the CKEditor toolbar: [How to manage onclick event of a CKEditor custom plugin in React js?](https://stackoverflow.com/questions/65421587/how-to-manage-onclick-event-of-a-ckeditor-custom-plugin-in-react-js). Ideally, the CKEditor5 React component would expose some functionality for this so we could pass some state setter function (`setIsModalShown`) to ``, for example. Hopefully this idea already exists and I'm just missing it. :) – ty2k Jan 07 '22 at 22:24
  • 1
    @ty2k Thanks for looking into this. I have used the portals to achieve the desired functionality. I have used the editor config to have a callback function for me that will listen to that click event. I was able to get what I need by down the line that's not how it meant to be done. CKEditor should provide a standard way to do it. – Surya Kavutarapu Jan 10 '22 at 11:56
  • 1
    Glad to hear you got it working! Hopefully the CKEditor team can give some feedback in [your GitHub issue](https://github.com/ckeditor/ckeditor5-react/issues/273) for how this can work in a standardized way. – ty2k Jan 10 '22 at 16:35
  • @SuryaKavutarapu could you share your solution? How did you render the modal on the `execute` command? – Akhil Mohandas Sep 20 '22 at 17:46

0 Answers0