如何为CKEditor添加自定义下拉选择组件并实现链接插入功能？

Absolutely, this is totally achievable! You have two main approaches to make this work: either build a custom CKEditor plugin to add the dropdown directly into the editor toolbar (the most seamless method), or use a standalone select element outside the editor and hook it up to CKEditor's API. Let's break both down:

Approach 1: Add a Dropdown to the CKEditor Toolbar (Plugin Method) #

This is the cleanest way, as it integrates your dropdown right into CKEditor's interface. Here's a sample plugin for CKEditor 4:

Step 1: Create the Custom Plugin File #

Save this as customLinkDropdown.js in your CKEditor plugins folder:

CKEDITOR.plugins.add('customLinkDropdown', {
    init: function(editor) {
        // Define your dropdown options here
        const linkOptions = [
            { label: 'My Page', value: 'link_to_mypage' },
            { label: 'Another Page', value: 'link_to_anotherpage' } // Add more as needed
        ];

        // Register the command to insert the link
        editor.addCommand('insertCustomLink', {
            exec: function(editor, data) {
                // Create the <a> element
                const link = editor.document.createElement('a');
                link.setAttribute('href', data.value);
                link.setText(data.label);
                
                // Insert it at the current cursor position
                editor.insertElement(link);
            }
        });

        // Add the dropdown to the toolbar
        editor.ui.addRichCombo('customLinkDropdown', {
            label: 'Insert Custom Link',
            title: 'Choose a Link to Insert',
            toolbar: 'insert,10', // Position it in the toolbar
            panel: {
                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss),
                multiSelect: false
            },

            init: function() {
                this.startGroup('Custom Links');
                // Populate the dropdown with your options
                linkOptions.forEach(item => {
                    this.add(item.value, item.label, item.label);
                });
            },

            onClick: function(value) {
                // Trigger the insert command when an option is selected
                const selectedItem = linkOptions.find(item => item.value === value);
                editor.execCommand('insertCustomLink', selectedItem);
            }
        });
    }
});

Step 2: Configure CKEditor to Load the Plugin #

Update your CKEditor config.js to include the plugin and add it to the toolbar:

CKEDITOR.editorConfig = function(config) {
    // Add the custom plugin to the list of loaded plugins
    config.extraPlugins = 'customLinkDropdown';
    
    // Define your toolbar layout (add the dropdown where you want it)
    config.toolbar = [
        ['Bold', 'Italic', 'Underline'],
        ['customLinkDropdown'],
        ['Undo', 'Redo']
    ];
};

Approach 2: Use an External Select Element #

If you prefer to keep your dropdown outside the CKEditor interface, you can listen to its change event and interact directly with the CKEditor instance:

<!-- Your external dropdown -->
<select id="customLinkSelect">
    <option value="">Select a link...</option>
    <option value="link_to_mypage">My Page</option>
    <option value="link_to_anotherpage">Another Page</option>
</select>

<script>
// Get the CKEditor instance (replace 'editor' with your editor's ID)
const editor = CKEDITOR.instances.editor;

// Listen for the dropdown's change event
document.getElementById('customLinkSelect').addEventListener('change', function(e) {
    const selectedValue = e.target.value;
    const selectedText = e.target.options[e.target.selectedIndex].text;
    
    if (selectedValue) {
        // Create and insert the link
        const link = editor.document.createElement('a');
        link.setAttribute('href', selectedValue);
        link.setText(selectedText);
        editor.insertElement(link);
        
        // Reset the dropdown to default if desired
        e.target.selectedIndex = 0;
    }
});
</script>

Both methods will insert the exact <a href="link_to_mypage">My Page</a> element you want when an option is selected. The plugin method is recommended for a more integrated user experience.

内容的提问来源于stack exchange，提问作者Dilshod Komilov