Search code examples
javascriptajaxtinymcewysiwyg

tinyMCE 6 insert link to server side content


I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.

One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.

Below is an example of the javascript that I have:

tinymce.init({
    selector: '.course_page_editor',
    toolbar: 'custContentLink',
    setup: (editor) => {
        editor.ui.registry.addButton('custContentLink', {
            text: 'Insert Content Link',
            onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
    });
    }
});

function insert_content_link_dialog(editor)
{
    editor.windowManager.open({
        title: 'Insert Content Link',
        body: {
            type: 'panel',
            items: [{
                type: 'selectbox',
                name: 'content_list',
                label: 'Choose the file that the link should point to:',
                size: 5,
                //TODO: generate list of uploaded content URLs
                items: [
                    {text: 'Primary', value: 'primary style'},
                    {text: 'Success', value: 'success style'},
                    {text: 'Error', value: 'error style'}
                ],
                flex: true
            }]
        },
        onSubmit: function () {
            //TODO: replace highlighted text with selected link
        },
        buttons: [
            {
                text: 'Close',
                type: 'cancel',
                onclick: 'close'
            },
            {
                text: 'Add content link',
                type: 'submit',
                primary: true,
                enabled: true
            }
        ]
    });
};

How do I create a popup list of links to server side content


Solution

  • My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.