protected List<object> ToolbarItems = new()
{
new CustomToolbarItemModel(){ Id="Play", Text="Play", PrefixIcon="fas fa-play"},
new CustomToolbarItemModel(){ Id="Rewind", Text="Rewind", PrefixIcon="fas fa-backward"},
new CustomToolbarItemModel(){ Id="Forward", Text="Forward", PrefixIcon="fas fa-forward"},
new CustomToolbarItemModel(){ Id="PlaybackSpeed", Text="Playback Speed", PrefixIcon="fas fa-tachometer-alt"},
"Undo",
"Redo",
new CustomToolbarItemModel(){ Id="Highlight", Text="Highlight", PrefixIcon="fas fa-highlighter"},
new CustomToolbarItemModel(){ Id="Strike", Text="Strike", PrefixIcon="fas fa-strikethrough"},
"Comments",
new CustomToolbarItemModel(){ Id="FindReplace", Text="Find & Replace", PrefixIcon="fas fa-search"},
new CustomToolbarItemModel(){ Id="Download", Text="Download", PrefixIcon="fas fa-file-download"},
new CustomToolbarItemModel(){ Id="Print", Text="Print", PrefixIcon="fas fa-print"}
};
.razor:
<SfDocumentEditorContainer @ref="sfDocumentEditorContainer"
ToolbarItems="@ToolbarItems" EnableToolbar="true" Height="100%" ShowPropertiesPane="false">
<DocumentEditorContainerEvents Created="sfDocumentEditorContainer_OnLoad">
DocumentEditorContainerEvents>
Host.cshtml:
rel='nofollow' href="libs/fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
Screenshot:
I am trying to use font awesome in the word processor toolbar and I do not see the font awesome icons. I am referring to the following https://www.syncfusion.com/forums/153987/font-awesome-in-toolbar-and-button article. a. Are third party icons supported in word processor toolbar ? |
Yes, you can use third party icons in toolbar,
We have provided sample example for how to use fontawesome icons.
Add below highlighted line in _Host.cshtml to work properly:
| ||
Similarly, how can I show a dropdown instead of a button in a word processor toolbar? Eg: in the screenshot below, I would like the user to select a dropdown value for playback speed before he clicks playback speed. similarly, I would like the user to specify a download type in a dropdown before he clicks download. |
Document Editor doesn’t have support for adding a drop-down list in custom tool bar in blazor.
Custom toolbar option has only options to add the buttons in toolbar items. Like which you added in your examples.
| ||
Is it possible to show a divider between certain sections of a toolbar eg: I would like to separate "play", "rewind", "forward", "playback speed" toolbar items(please refer to screenshot below) from other items in the toolbar. |
You can include the separator by adding “Separator” in custom toolba.
Check provided sample it contains separator.
| ||
It is possible to customize the word processor control to add a video control on the right hand side? This control can be then controlled by the "play", "rewind", "forward", "playback speed" toolbar items. |
You can achieve this in sample level
. Example: Give two div one is Documenteditor and another is video control. Add custom options in toolbar and onToolbar click event, bind the functionality for play,rewind,forward etc. | ||
Is it possible to highlight a particular toolbar item to draw users attention towards it? eg: I would like to draw the users attention towards "Save" button but it looks similar to all the other buttons. |
Can you please share your use case scenario in detailed with example screenshot? That will be helpful for us to proceed further and provide you solution at earliest. | ||
I see that the word processor takes a long time(more than 10 seconds) to load, even on my local development machine. How can I indicate that the system is processing and will take time to render the word processor?
|
Initially, Wordprocessor will take some time to load script required for control rendering.
You can use spinner to show/hide before and after control render.
Please check below for how to add spinner(We have included it in provided sample).
|
|
protected void sfDocumentEditorContainer_OnToolbarClick(ClickEventArgs args)
{
var documentEditor = sfDocumentEditorContainer.DocumentEditor;
var filename = System.Net.WebUtility.UrlEncode(documentName);
if (args.Item.Id == printCustomToolbarItemModel.Id)
{
documentEditor.Print();
}
else if (args.Item.Id == findreplaceCustomToolbarItemModel.Id)
{
documentEditor.ShowOptionsPane();
}
else if (args.Item.Id == highlightCustomToolbarItemModel.Id)
{
documentEditor.Selection.CharacterFormat.SetHighlightColor(HighlightColor.Yellow);
}
else if (args.Item.Id == strikeCustomToolbarItemModel.Id)
{
documentEditor.Editor.ToggleStrikethrough(Strikethrough.SingleStrike);
}
else if (args.Item.Id == undoCustomToolbarItemModel.Id)
{
documentEditor.EditorHistory.Undo();
}
else if (args.Item.Id == redoCustomToolbarItemModel.Id)
{
documentEditor.EditorHistory.Redo();
}
else if (args.Item.Id == commentsCustomToolbarItemModel.Id)
{
//documentEditor.Editor.ToggleComments();//Is there an appropriate function that I can call here?
}
}
private static readonly CustomToolbarItemModel playCustomToolbarItemModel =
new(){ Id="play", Text="Play", PrefixIcon="fas fa-play", TooltipText = "Play"};
private static readonly CustomToolbarItemModel rewindcustomToolbarItemModel = new()
{Id = "rewind", Text = "Rewind", PrefixIcon = "fas fa-backward", TooltipText = "Rewind"};
private static readonly CustomToolbarItemModel rewindCustomToolbarItemModel =
new() {Id = "forward", Text = "Forward", PrefixIcon = "fas fa-forward", TooltipText = "Forward"};
private static readonly CustomToolbarItemModel playbackspeedCustomToolbarItemModel = new()
{Id = "playbackspeed", Text = "Playback Speed", PrefixIcon = "fas fa-tachometer-alt", TooltipText = "Playback Speed"};
private static readonly CustomToolbarItemModel undoCustomToolbarItemModel =
new() {Id = "undo", Text = "Undo", PrefixIcon = "fas fa-undo", TooltipText = "Undo"};
private static readonly CustomToolbarItemModel redoCustomToolbarItemModel =
new() {Id = "redo", Text = "Redo", PrefixIcon = "fas fa-redo", TooltipText = "Redo"};
private static readonly CustomToolbarItemModel commentsCustomToolbarItemModel =
new() {Id = "comments", Text = "Comments", PrefixIcon = "fas fa-comments", TooltipText = "Comments"};
private static readonly CustomToolbarItemModel highlightCustomToolbarItemModel =
new() {Id = "highlight", Text = "Highlight", PrefixIcon = "fas fa-highlighter", TooltipText = "Highlight"};
private static readonly CustomToolbarItemModel strikeCustomToolbarItemModel =
new() {Id = "strike", Text = "Strike", PrefixIcon = "fas fa-strikethrough", TooltipText = "Strike"};
private static readonly CustomToolbarItemModel findreplaceCustomToolbarItemModel =
new() {Id = "findReplace", Text = "Find & Replace", PrefixIcon = "fas fa-search", TooltipText = "Find & Replace"};
private static readonly CustomToolbarItemModel saveCustomToolbarItemModel =
new() {Id = "save", Text = "Save", PrefixIcon = "fas fa-save", TooltipText = "Save"};
private static readonly CustomToolbarItemModel printCustomToolbarItemModel =
new (){ Id="print", Text="Print", PrefixIcon="fas fa-print", TooltipText = "Print"};
protected List<DownloadFileType> DownloadFileTypes { get; set; }
protected List<KeyValueType> AWSTranslateSupportedLanguages { get; set; }
protected string selectedDownloadFileType { get; set; } = "Docx";
protected List<object> ToolbarItems = new()
{
playCustomToolbarItemModel,
rewindcustomToolbarItemModel,
rewindCustomToolbarItemModel,
playbackspeedCustomToolbarItemModel,
"Separator",
undoCustomToolbarItemModel,
redoCustomToolbarItemModel,
"Comments",
highlightCustomToolbarItemModel,
strikeCustomToolbarItemModel,
findreplaceCustomToolbarItemModel,
saveCustomToolbarItemModel,
printCustomToolbarItemModel
};
<SfDocumentEditorContainer @ref="sfDocumentEditorContainer" ToolbarItems="@ToolbarItems"
EnableToolbar="true" Height="100%" ShowPropertiesPane="true"
EnableComment="true" EnableLocalPaste="true" EnableSpellCheck="true"
EnableTrackChanges="true">
<DocumentEditorContainerEvents OnToolbarClick="sfDocumentEditorContainer_OnToolbarClick"
Created="sfDocumentEditorContainer_Created">
</DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
container.DocumentEditor.Editor.InsertComment("");
|