Как вызвать модальное окно из пользовательской кнопки редактора перьев

Question

У меня есть настраиваемая кнопка ( embed ) в моем редакторе перьев, которая использует подсказку для вызова windows всплывающего окна

Теперь я хочу изменить всплывающее окно windows на модальное окно при нажатии кнопки embed .

Честно говоря, я не знаю, как go об этом, так как я впервые использую перо.

Я использую файл расширения quill для создания пользовательской кнопки ( embed )

Я в недоумении, нужно ли создать модальное окно, а также как вызвать модальное окно, когда пользовательское перо нажата кнопка.

Так я называю перо с моей точки зрения

<div class="form-group col-xs-12">
                                <label class="control-label">
                                    Description
                                </label>

                                <div id="createSchool_Description_div" style="height:300px;"></div>


</div>
 <script>
        $(document).ready(function () {



<text>  
      prepareQuill('#createSchool_Description_div');  
 </text>

}

Файл расширения моего перо

       var quills = {};
function addQuillExtension(__quill) {
    if (__quill === undefined || __quill === null) {
        throw new this.DOMException("__quill editor not defined");
    }
    else {
        __quill.root.addEventListener("paste", function (e) {
            retrieveImageFromClipboardAsBase64(e, function (imageDataBase64) {
                // If there's an image, open it in the browser as a new window :)
                if (imageDataBase64) {
                    // data:image/png;base64,iVBORw0KGgoAAAAN......
                    let content = __quill.getContents();
                    __quill.clipboard.dangerouslyPasteHTML(content.length, "<img src=" + imageDataBase64 + ">");
                    //window.open(imageDataBase64);
                }
            });
        }, false);
        let embedbutton = __quill.container.previousSibling.querySelector('.ql-embed');
        embedbutton.setAttribute('title', 'Embed video/audio');
        embedbutton.onclick = function () {
            let url = prompt("Enter youtube URL");
            let spliturl = url.split('=');
            let suffix = spliturl[1];
            let embedurl = `https://www.youtube.com/embed/${suffix}?rel=0`;
            //debugger;
            let embedhtml = `<iframe class="youtubeembed" src="${embedurl}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
            let content = __quill.getContents();
            __quill.clipboard.dangerouslyPasteHTML(content.length, embedhtml);
        };
    }
    function retrieveImageFromClipboardAsBase64(pasteEvent, callback, imageFormat) {
        if (pasteEvent.clipboardData === false) {
            if (typeof callback === "function") {
                callback(undefined);
            }
        }

        var items = pasteEvent.clipboardData.items;

        if (items === undefined) {
            if (typeof callback === "function") {
                callback(undefined);
            }
        }

        for (var i = 0; i < items.length; i++) {
            // Skip content if not image
            if (items[i].type.indexOf("image") === -1) continue;
            // Retrieve image on clipboard as blob
            var blob = items[i].getAsFile();

            // Create an abstract canvas and get context
            var mycanvas = document.createElement("canvas");
            var ctx = mycanvas.getContext('2d');

            // Create an image
            var img = new Image();

            // Once the image loads, render the img on the canvas
            img.onload = function () {
                // Update dimensions of the canvas with the dimensions of the image
                mycanvas.width = this.width;
                mycanvas.height = this.height;

                // Draw the image
                ctx.drawImage(img, 0, 0);

                // Execute callback with the base64 URI of the image
                if (typeof callback === "function") {
                    callback(mycanvas.toDataURL(imageFormat || "image/png"));
                }
            };

            // Crossbrowser support for URL
            var URLObj = window.URL || window.webkitURL;

            // Creates a DOMString containing a URL representing the object given in the parameter
            // namely the original Blob
            img.src = URLObj.createObjectURL(blob);
        }
    }
}

function prepareQuill(selector, html) {
    let quill;
    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

        //[{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        //[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['link', 'image', 'embed'],

        ['clean'],                                         // remove formatting button

        ['save']
    ];

    quill = new Quill(selector, {
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow'
    });

    addQuillExtension();

    if (html) {
        quill.clipboard.dangerouslyPasteHTML(html);
    }

    quills[selector] = quill;

    return quill;
    //quill.enable();
}

function getEditorHtml(id) {
    let holder = document.getElementById(id).querySelector('.ql-editor');
    let clone = holder.cloneNode(true);
    return clone.innerHTML;
}   

function getQuillEditorHtml(id) {
    let html = getEditorHtml(id);
    return html;
}

function setQuillEditorHtml(selector, html) {
    let quill = quills[selector];
    if (quill) {
        quill.clipboard.dangerouslyPasteHTML(html);
    }
    else {
        throw `quill editor for '${selector}' not found`;
    }
}

Answer 1

Я не думаю, что вам нужно писать для этого пользовательскую кнопку, так как quill уже имеет кнопку для вставки видео.

Просто добавьте «видео» в параметры панели инструментов при создании примера пера ниже:

    ['bold', 'italic', 'underline', 'strike', '**video**']]