Customize Image/Video/Audio Edit toolbars

[Brian Pautsch]

Is there a way to configure which editing options are displayed?
For example, when the image edit toolbar displays, we don't want to show "Text Align" or "Layout".
Or when the video or audio edit toolbars displays, we only want to show "Replace" and "Delete".
See image below.

We could do it with CSS, but then a visitor could unhide and use them.
We could remove them from the DOM, but that seems hacky.

[Vinitha Jeyakumar]

Hi Brian Pautsch,

You can configure which items appear in the Quick Toolbar by defining them through the RichTextEditorQuickToolbarSettings.

• Images: Use RichTextEditorQuickToolbarSettings.Image to specify the quick toolbar items that should be displayed when an image is selected.
• Audio: Use RichTextEditorQuickToolbarSettings.Audio to configure the toolbar items available when an audio element is selected.
• Video: Use RichTextEditorQuickToolbarSettings.Video to define the toolbar items shown when a video element is selected.

Please refer to the following code snippet and documentation for guidance:

Code snippet:

<SfRichTextEditor>

    <RichTextEditorQuickToolbarSettings Image="@Image"  Audio="Audio" Video="Video" />    

</SfRichTextEditor>

@code {

    private List<ImageToolbarItemModel> Image = new List<ImageToolbarItemModel>()

    {

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Replace },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Caption },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Remove },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.OpenImageLink },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Separator },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.EditImageLink },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.RemoveImageLink },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Display },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.AltText },

        new ImageToolbarItemModel() { Command = ImageToolbarCommand.Dimension }

    };

 private List<AudioToolbarItemModel> Audio = new List<AudioToolbarItemModel>()

    {

        new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioRemove },

        new AudioToolbarItemModel() { Command = AudioToolbarCommand.AudioReplace},

        

    };

 private List<VideoToolbarItemModel> Video = new List<VideoToolbarItemModel>()

    {

        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoReplace },

        new VideoToolbarItemModel() { Command = VideoToolbarCommand.VideoRemove},

    };

}

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/toolbar#quick-toolbar

Regards,

Vinitha

[Brian Pautsch]

Syncfusion has the best support. Fast and very helpful. Thanks!

[Brian Pautsch]

Follow up question: Is there a way to remove "Embed" when inserting a video?

Or do I need to create a custom dialog 

[Vinitha Jeyakumar]

Hi Brian Pautsch,

Your requirement can be achieved by customizing the CSS styles as below,

Code snippet:

 

   <style>

            div:has(> input#embedURL) {

                display: none;

            }

    </style>

Regards,

Vinitha

[Brian Pautsch]

Close. The option is hidden, but the embed field still shows.

I'll have to adjust this via JS: When the modal loads, I'll need to select the Web URL option.

[Brian Pautsch]

I implemented this "solution", but is there a better, more reliable method?

1. Added event  DialogOpened:

<RichTextEditorEvents DialogOpened="DialogOpened" />

2.  DialogOpened calls a JS function:

await JSRuntime.InvokeVoidAsync("appFunctions.adjustRTE");

3. And here's the JS:

    adjustRTE: function () {

        const divVideo = $('#rtePostMessageID_video_dialog-content');

        if (divVideo != null) {

            const radioURL = divVideo.find('input[type="radio"][name="URL"][value="Web URL"]')[0];

            if (radioURL != null) {

                radioURL.click();

                radioURL.dispatchEvent(new Event('change', { bubbles: true }));

            }

            const divEmbed = divVideo.find('div.e-radio-wrapper.e-wrapper:has(input[type="radio"][name="URL"][value="Embed URL"])')[0];

            if (divEmbed !== null)

                divEmbed.style.display = "none";

        }

    },

[Vinitha Jeyakumar]

Brian Pautsch,

As of now, there is no built-in way to hide or remove the embedded URL from the 'Insert Video' dialog. You can continue using your own workaround as mentioned earlier for a better solution.

[Brian Pautsch]

Thanks

[Archana Jayakumar]

Hi Brain,

You are welcome! please get back to us if you need any further assistance. 

Regards,
Archana