Skip to content

Commit 913162f

Browse files
erinnmclaughlinerinnmclaughlin
authored
add ability to customize toolbar options (#12)
* add ability to customize toolbar options
1 parent 9f8dce9 commit 913162f

File tree

7 files changed

+313
-56
lines changed

7 files changed

+313
-56
lines changed

‎README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,49 @@ Then add the following to your `_Imports.razor`:
3535
@using Tizzani.MudBlazor.HtmlEditor
3636
```
3737

38+
## Configuring Toolbar Options (available since v2.1)
39+
There are several options available for customizing the HTML editor toolbar.
40+
41+
To customize options for a specific editor instance, define a `<MudHtmlToolbarOptions>` inside the `<MudHtmlEditor>`:
42+
43+
```html
44+
<MudHtmlEditor>
45+
<MudHtmlToolbarOptions InsertImage="false" /> <!-- This will exclude the "insert image" toolbar option -->
46+
</MudHtmlEditor>
47+
```
48+
49+
For all available options, see [here](./src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor.cs).
50+
51+
### Configuring Default Options
52+
To configure default options for all instances of the HTML editor, you can wrap your razor content with `<CascadingMudHtmlToolbarOptions>`.
53+
54+
#### App.razor or Routes.razor
55+
```html
56+
<CascadingMudHtmlToolbarOptions InsertImage="false">
57+
<Router AppAssembly="@typeof(Program).Assembly">
58+
<!-- etc. -->
59+
</Router>
60+
</CascadingMudHtmlToolbarOptions>
61+
```
62+
63+
Child components will inherit the default options, unless they override them with their own `<MudHtmlToolbarOptions>` instance.
64+
65+
### Advanced Customization
66+
For more advanced customization, you can define your own toolbar options inside of an individual `<MudHtmlEditor>` component:
67+
68+
```html
69+
<MudHtmlEditor>
70+
<span class="ql-formats">
71+
<button class="ql-bold" type="button"></button>
72+
<button class="ql-italic" type="button"></button>
73+
<button class="ql-underline" type="button"></button>
74+
<button class="ql-strike" type="button"></button>
75+
</span>
76+
</MudHtmlEditor>
77+
```
78+
79+
See the [QuillJS documentation](https://quilljs.com/docs/modules/toolbar/) for more information on customizing the toolbar.
80+
3881
## Migrating from v1.0 to v2.0
3982
* Remove the `services.AddMudBlazorHtmlEditor();` call from your `Startup.cs` or `Program.cs` file.
4083
* Remove the `<script src="_content/Tizzani.MudBlazor.HtmlEditor/HtmlEditor.js">` tag from the document body. The required JS is now included by default.

‎samples/BlazorWasm/App.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
<p role="alert">Sorry, there's nothing at this address.</p>
1010
</LayoutView>
1111
</NotFound>
12-
</Router>
12+
</Router>

‎src/Tizzani.MudBlazor.HtmlEditor/CascadingMudHtmlToolbarOptions.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@inherits MudHtmlToolbarOptions
2+
3+
<CascadingValue Value="this">
4+
@ChildContent
5+
</CascadingValue>
6+
7+
@code {
8+
[Parameter]
9+
public RenderFragment? ChildContent { get; set; }
10+
}

‎src/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.razor‎

Lines changed: 1 addition & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,7 @@
22
<div @ref="_toolbar">
33
@if (ChildContent is null)
44
{
5-
<span class="ql-formats">
6-
<select class="ql-header">
7-
<option value="1">Heading 1</option>
8-
<option value="2">Heading 2</option>
9-
<option value="3">Heading 3</option>
10-
<option value="4">Heading 4</option>
11-
<option value="5">Heading 5</option>
12-
<option value="6">Heading 6</option>
13-
<option value="" selected>Paragraph</option>
14-
</select>
15-
</span>
16-
17-
<span class="ql-formats">
18-
<button class="ql-bold"></button>
19-
<button class="ql-italic"></button>
20-
<button class="ql-underline"></button>
21-
<button class="ql-strike"></button>
22-
</span>
23-
24-
<span class="ql-formats">
25-
<select class="ql-color"></select>
26-
<select class="ql-background"></select>
27-
</span>
28-
29-
<span class="ql-formats">
30-
<button class="ql-script" value="sub"></button>
31-
<button class="ql-script" value="super"></button>
32-
</span>
33-
34-
<span class="ql-formats">
35-
<button class="ql-align" value=""></button>
36-
<button class="ql-align" value="center"></button>
37-
<button class="ql-align" value="right"></button>
38-
<button class="ql-align" value="justify"></button>
39-
</span>
40-
41-
<span class="ql-formats">
42-
<button class="ql-list" value="ordered"></button>
43-
<button class="ql-list" value="bullet"></button>
44-
<button class="ql-indent" value="+1"></button>
45-
<button class="ql-indent" value="-1"></button>
46-
</span>
47-
48-
<span class="ql-formats">
49-
<button class="ql-link"></button>
50-
<button class="ql-image"></button>
51-
<button class="ql-blockquote"></button>
52-
<button class="ql-code-block"></button>
53-
<button class="ql-hr" title="Horizontal Line">
54-
<svg viewBox="0 0 24 24">
55-
<path d="M4 19h16c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" class="ql-fill"></path>
56-
</svg>
57-
</button>
58-
</span>
5+
<MudHtmlToolbarOptions />
596
}
607
else
618
{

‎src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
@if (Show(TypographyPicker))
2+
{
3+
<span class="ql-formats">
4+
<select class="ql-header">
5+
<option value="1">Heading 1</option>
6+
<option value="2">Heading 2</option>
7+
<option value="3">Heading 3</option>
8+
<option value="4">Heading 4</option>
9+
<option value="5">Heading 5</option>
10+
<option value="6">Heading 6</option>
11+
<option value="" selected>Paragraph</option>
12+
</select>
13+
</span>
14+
}
15+
16+
@if (Show(Bold, Italic, Underline, Strike))
17+
{
18+
<span class="ql-formats">
19+
@if (Show(Bold))
20+
{
21+
<button class="ql-bold" type="button"></button>
22+
}
23+
@if (Show(Italic))
24+
{
25+
<button class="ql-italic" type="button"></button>
26+
}
27+
@if (Show(Underline))
28+
{
29+
<button class="ql-underline" type="button"></button>
30+
}
31+
@if (Show(Strike))
32+
{
33+
<button class="ql-strike" type="button"></button>
34+
}
35+
</span>
36+
}
37+
38+
@if (Show(ForegroundColorPicker, BackgroundColorPicker))
39+
{
40+
<span class="ql-formats">
41+
@if (Show(ForegroundColorPicker))
42+
{
43+
<select class="ql-color"></select>
44+
}
45+
@if (Show(BackgroundColorPicker))
46+
{
47+
<select class="ql-background"></select>
48+
}
49+
</span>
50+
}
51+
52+
@if (Show(SubSuperScript))
53+
{
54+
<span class="ql-formats">
55+
<button class="ql-script" value="sub" type="button"></button>
56+
<button class="ql-script" value="super" type="button"></button>
57+
</span>
58+
}
59+
60+
@if (Show(Align))
61+
{
62+
<span class="ql-formats">
63+
<button class="ql-align" type="button" value=""></button>
64+
<button class="ql-align" type="button" value="center"></button>
65+
<button class="ql-align" type="button" value="right"></button>
66+
<button class="ql-align" type="button" value="justify"></button>
67+
</span>
68+
}
69+
70+
@if (Show(OrderedList, UnorderedList, Indent))
71+
{
72+
<span class="ql-formats">
73+
@if (Show(OrderedList))
74+
{
75+
<button class="ql-list" type="button" value="ordered"></button>
76+
}
77+
@if (Show(UnorderedList))
78+
{
79+
<button class="ql-list" type="button" value="bullet"></button>
80+
}
81+
@if (Show(Indent))
82+
{
83+
<button class="ql-indent" type="button" value="+1"></button>
84+
<button class="ql-indent" type="button" value="-1"></button>
85+
}
86+
</span>
87+
}
88+
89+
@if (Show(InsertLink, InsertImage, Blockquote, CodeBlock, HorizontalRule))
90+
{
91+
<span class="ql-formats">
92+
@if (Show(InsertLink))
93+
{
94+
<button class="ql-link" type="button"></button>
95+
}
96+
@if (Show(InsertImage))
97+
{
98+
<button class="ql-image" type="button"></button>
99+
}
100+
@if (Show(Blockquote))
101+
{
102+
<button class="ql-blockquote" type="button"></button>
103+
}
104+
@if (Show(CodeBlock))
105+
{
106+
<button class="ql-code-block" type="button"></button>
107+
}
108+
@if (Show(HorizontalRule))
109+
{
110+
<button class="ql-hr" title="Horizontal Line">
111+
<svg viewBox="0 0 24 24">
112+
<path d="M4 19h16c.55 0 1-.45 1-1v-4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" class="ql-fill"></path>
113+
</svg>
114+
</button>
115+
}
116+
</span>
117+
}

‎src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor.cs‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
using Microsoft.AspNetCore.Components;
2+
3+
namespace Tizzani.MudBlazor.HtmlEditor;
4+
5+
/// <summary>
6+
/// Defines the toolbar options that are available in the HtmlEditor.
7+
/// </summary>
8+
public partial class MudHtmlToolbarOptions
9+
{
10+
[CascadingParameter]
11+
private MudHtmlToolbarOptions? DefaultOptions { get; set; }
12+
13+
/// <summary>
14+
/// If <see langword="true"/>, the toolbar will include the option to select different headings and paragraph styles.
15+
/// </summary>
16+
[Parameter]
17+
public bool? TypographyPicker { get; set; }
18+
19+
/// <summary>
20+
/// If <see langword="true"/>, the toolbar will include the option to bold text.
21+
/// </summary>
22+
[Parameter]
23+
public bool? Bold { get; set; }
24+
25+
/// <summary>
26+
/// If <see langword="true"/>, the toolbar will include the option to italicize text.
27+
/// </summary>
28+
[Parameter]
29+
public bool? Italic { get; set; }
30+
31+
/// <summary>
32+
/// If <see langword="true"/>, the toolbar will include the option to underline text.
33+
/// </summary>
34+
[Parameter]
35+
public bool? Underline { get; set; }
36+
37+
/// <summary>
38+
/// If <see langword="true"/>, the toolbar will include the option to strike through text.
39+
/// </summary>
40+
[Parameter]
41+
public bool? Strike { get; set; }
42+
43+
/// <summary>
44+
/// If <see langword="true"/>, a color picker for the foreground color will be available in the toolbar.
45+
/// </summary>
46+
[Parameter]
47+
public bool? ForegroundColorPicker { get; set; }
48+
49+
/// <summary>
50+
/// If <see langword="true"/>, a color picker for the background color will be available in the toolbar.
51+
/// </summary>
52+
[Parameter]
53+
public bool? BackgroundColorPicker { get; set; }
54+
55+
/// <summary>
56+
/// If <see langword="true"/>, the toolbar will include the option to insert subscripts and superscripts.
57+
/// </summary>
58+
[Parameter]
59+
public bool? SubSuperScript { get; set; }
60+
61+
/// <summary>
62+
/// If <see langword="true"/>, the toolbar will include the option to align text (e.g., left, center, right, justify).
63+
/// </summary>
64+
[Parameter]
65+
public bool? Align { get; set; }
66+
67+
/// <summary>
68+
/// If <see langword="true"/>, the toolbar will include the option to insert an unordered (numbered) list.
69+
/// </summary>
70+
[Parameter]
71+
public bool? OrderedList { get; set; }
72+
73+
/// <summary>
74+
/// If <see langword="true"/>, the toolbar will include the option to insert an unordered (bulleted) list.
75+
/// </summary>
76+
[Parameter]
77+
public bool? UnorderedList { get; set; }
78+
79+
/// <summary>
80+
/// If <see langword="true"/>, the toolbar will include the option of increasing/decreasing the indent size.
81+
/// </summary>
82+
[Parameter]
83+
public bool? Indent { get; set; }
84+
85+
/// <summary>
86+
/// If <see langword="true"/>, the toolbar will include the option of inserting a hyperlink.
87+
/// </summary>
88+
[Parameter]
89+
public bool? InsertLink { get; set; }
90+
91+
/// <summary>
92+
/// If <see langword="true"/>, the toolbar will include the option of inserting an image.
93+
/// </summary>
94+
[Parameter]
95+
public bool? InsertImage { get; set; }
96+
97+
/// <summary>
98+
/// If <see langword="true"/>, the toolbar will include the option of inserting a blockquote.
99+
/// </summary>
100+
[Parameter]
101+
public bool? Blockquote { get; set; }
102+
103+
/// <summary>
104+
/// If <see langword="true"/>, the toolbar will include the option of inserting a code block.
105+
/// </summary>
106+
[Parameter]
107+
public bool? CodeBlock { get; set; }
108+
109+
/// <summary>
110+
/// If <see langword="true"/>, the toolbar will include the option of inserting a horizontal rule.
111+
/// </summary>
112+
[Parameter]
113+
public bool? HorizontalRule { get; set; }
114+
115+
private static bool Show(params bool?[] options) => options.Any(o => o is not false);
116+
117+
protected override void OnInitialized()
118+
{
119+
if (DefaultOptions != null)
120+
{
121+
TypographyPicker ??= DefaultOptions.TypographyPicker;
122+
Bold ??= DefaultOptions.Bold;
123+
Italic ??= DefaultOptions.Italic;
124+
Underline ??= DefaultOptions.Underline;
125+
Strike ??= DefaultOptions.Strike;
126+
ForegroundColorPicker ??= DefaultOptions.ForegroundColorPicker;
127+
BackgroundColorPicker ??= DefaultOptions.BackgroundColorPicker;
128+
SubSuperScript ??= DefaultOptions.SubSuperScript;
129+
Align ??= DefaultOptions.Align;
130+
OrderedList ??= DefaultOptions.OrderedList;
131+
UnorderedList ??= DefaultOptions.UnorderedList;
132+
Indent ??= DefaultOptions.Indent;
133+
InsertLink ??= DefaultOptions.InsertLink;
134+
InsertImage ??= DefaultOptions.InsertImage;
135+
Blockquote ??= DefaultOptions.Blockquote;
136+
CodeBlock ??= DefaultOptions.CodeBlock;
137+
HorizontalRule ??= DefaultOptions.HorizontalRule;
138+
}
139+
}
140+
}

‎src/Tizzani.MudBlazor.HtmlEditor/Tizzani.MudBlazor.HtmlEditor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<RepositoryUrl>https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor</RepositoryUrl>
1010
<PackageLicenseFile>LICENSE</PackageLicenseFile>
1111
<PackageReadmeFile>README.md</PackageReadmeFile>
12-
<Version>2.0.0</Version>
12+
<Version>2.1.0</Version>
1313
<Description>A customizable HTML editor component for MudBlazor, powered by QuillJS.</Description>
1414
<Copyright>2024 Erin McLaughlin</Copyright>
1515
<PackageProjectUrl>https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor</PackageProjectUrl>

0 commit comments

Comments
 (0)