How to provide a custom component in the existing Web page Editor Palette

Finally, I found the solution of the problem.

For adding new categories in the palette, we need to use pagedesignerextension in plugin.xml as following –


Where CustomEditorPaletteFactory will be extending AbstractPaletteFactory. Here in createPaletteRoot(), we can add our category.

public PaletteRoot createPaletteRoot(IEditorInput editorInput){
PaletteRoot paletteRoot = new PaletteRoot();
return paletteRoot;
//return null;

private static PaletteContainer createStandardComponents() {
PaletteDrawer componentsDrawer = new PaletteDrawer("CustomHTMLComponent");

TagToolPaletteEntry paletteEntry = new TagToolPaletteEntry(
new FormPaletteComponent(".....);

return componentsDrawer;

This will create the component category in the palette and we can add as many components as needed using the componentsdrawer.

For adding a new category in the existing one –
Add this in the constructor –

        this._paletteContext = PaletteItemManager.createPaletteContext(file);
        this._manager = PaletteItemManager.getInstance(_paletteContext);

Then use Palette Grouping like this –

PaletteGroup controls = new PaletteGroup("CUST HTML");

        ToolEntry tool = new SelectionToolEntry("CUST Cursor",
                "Cursor DESCRIPTION");

//Custom Marquee
        controls.add(new MarqueeToolEntry("Marquee", "Marquee Desc"));

        controls.add(new PaletteSeparator());
//This class maintins or load all categories features
        controls.add(new CustomComponentToolEntry("Custom Component", "Custom Component Descrition", 

Leave a Comment