javascript - TinyMCE: open a panel by double-clicking on text - Stack Overflow

admin管理员组

文章数量:1334826

With TinyMCE V6, i want to add a panel to add custom url links. In "adding mode", the panel works pretty good so far: the custom link is added perfectly.

I'd like users to be able to edit this custom link, with the same panel, by double-clicking on it. Is there any way to achieve it?

Here's what i did so far:

const InsertUrlPanel = {
            title: 'Insert Custom URL',
            body: {
                type: 'panel',
                items: [{
                    type: 'htmlpanel', 
                    html: '<p>Insert Custom URL</p>'
                },
                {
                    type: 'input',
                    name: 'strUrl',
                    inputMode: 'Custom URL to insert',
                    label: 'URL',
                    placeholder: '',
                    disabled: true,
                    maximized: false

                },
                {
                    type: 'selectbox',
                    name: 'selectboxLayout',
                    label: 'Custom Style',
                    disabled: true,
                    size: 1,
                    items: [
                        { value: 'text', text: 'Texte' },
                        { value: 'simple', text: 'Simple' },
                        { value: 'full', text: 'Total' }
                    ]
                }
                ]
            },
            initialData: {
                anyterms: false
            },
            buttons: [
                {
                    type: 'custom',
                    name: 'insert-Url-button',
                    text: 'Insert URL',
                    enabled: true
                },
                {
                    type: 'custom',
                    name: 'doesnothing',
                    text: 'Cancel',
                    enabled: true
                }
            ],                   
            onAction: (dialogApi, details) => {
                if (details.name === 'insert-Url-button') {
                    const strLayoutLeveldata = dialogApi.getData()
                    const strLayoutLevel = strLayoutLeveldata.selectboxLayout;                     
                    let strWidgetIcon = '<img width="24px" src="myserver_adress/link-solid.svg">';
                    let strWebSiteThumbnailToInsertFormated = `<a href="${strLayoutLeveldata.strUrl}" id="url_id" data-layout="${strLayoutLevel}">${strWidgetIcon}${strLayoutLeveldata.strUrl}</a>`;
                    tinymce.activeEditor.execCommand('InsertHTML', true, strWebSiteThumbnailToInsertFormated);
                    tinymce.activeEditor.selection.setNode(strWebSiteThumbnailToInsertFormated);
                    tinymce.activeEditor.dom.get("url_id").addEventListener("dblclick", function() {
                        console.log("dblclick");
                        });
                    dialogApi.close();
                } else if (details.name === 'doesnothing') {
                    dialogApi.close()
                }
            }
        };

本文标签： javascriptTinyMCE open a panel by doubleclicking on textStack Overflow