We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Customize(Fontawesome icons, dropdowns, divider in) Word processor and toolbar.

Customize(Fontawesome icons, dropdowns, divider in) Word processor and toolbar.

I am using the word processor control in our application and I have a large number of questions. I am ok with getting inputs instead of actual code samples, if that is faster. 

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 ?
b. 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. 
c. 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.
d. 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.
e. 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. 
f. 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? 

.razor.cs:
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:


5 Replies 1 reply marked as answer
SM Suriya Murugan Syncfusion Team May 10, 2021 10:10 AM UTC

Hi ajit, 



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: 
 
<head>  
--------------  
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>  
</head> 
 
 
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). 
 
 
 
 
 
 
 

Regards, 
Suriya M. 


AG ajit goel May 10, 2021 06:29 PM UTC

Thank you for your inputs. 
wrt to fontawesome, I have included the font awesome link in my host.cshtml file but the icons do not show up. I will take a look at the sample. 
wrt to "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.", the use case is that I woud like the save button to be more prominent compared to the other toolbar buttons. (perhaps we can increase the size of the icon or the text or create a border for the save toolbar button). Please see screenshot below and let me know if you have any inputs. 




SM Suriya Murugan Syncfusion Team May 11, 2021 07:27 AM UTC

Hi ajit, 

There’s no direct API to customize toolbar button. Using CSS , you can achieve it. 

Based on ID, you can find button and apply css property. Please check below for reference (included color for download button): 

 


Please let us know if you have any questions. 

Regards, 
Suriya M. 


AG ajit goel May 11, 2021 03:17 PM UTC

Most of the issues that I had listed have been resolved, Thank you so much Suriya. 
The only last issue is that when I click on the comments control in toolbar nothing happens since I do not have an appropriate action to bind to. Can you please advise? 

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>

SM Suriya Murugan Syncfusion Team May 12, 2021 05:57 AM UTC

Hi Ajit, 

Thanks for confirmation. 

You can bind below functionality in comments to insert comment in current selection and comment pane will open. 

container.DocumentEditor.Editor.InsertComment(""); 
 

Please let us know if you have any questions.   

Regards, 
Suriya M. 


Marked as answer
Loader.
Up arrow icon