How can I add interactive Html Tags like Button, Input feild inside the Ckeditor5 Content in Angular 17

[WalliSheikh]

I have a custom PlugIn that adds a button to the tool bar and on the click of that I want to add a button in my ckeditor5 Content, that on clicking will give me an alert.

I tried creating the element of button, but it get sanitized, I have tried using General HTML support to avoid sanitization, but the button comes in the span of General Html Support and is for preview only, I am working in angular 17. Help is appreicated!

Here is my Custom PlugIn

editor.ui.componentFactory.add('dropdownButton', locale => { const view = new ButtonView(locale);

    view.set({
        label: 'Click me',
        tooltip: true,
        class: 'custom-button' // Assigning class custom-button to the button
    });

    // Handle click event
    view.on('execute', () => {
        const buttonHtml = '<button class="responsive-button">Test</button>';
        const button = new ButtonView();
        button.set( {
            label : 'Test',
            tooltip: true,
            class: 'responsive-button'
        } );

        //Insert HTML directly into the editor
        editor.model.change(writer => {
            const viewFragment = editor.data.processor.toView(buttonHtml);
            const modelFragment = editor.data.toModel(viewFragment);

            // Insert the button at the current selection position
            editor.model.insertContent(modelFragment, editor.model.document.selection);
        });
    });

    return view;
});

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).