Skip to content

Commit c6a04d2

Browse files
ADefWebserverADefWebserver
authored
Merge pull request #59 from koddek/dotnet_update
Add A demo project and update the Readme
2 parents 49b439c + 96783bb commit c6a04d2

File tree

12 files changed

+348
-0
lines changed

12 files changed

+348
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"dotnet.defaultSolution": "Blazored.TextEditor.sln"
3+
}

‎Blazored.TextEditor.sln‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
1919
README.md = README.md
2020
EndProjectSection
2121
EndProject
22+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TextEditorDemo", "samples\TextEditorDemo\TextEditorDemo.csproj", "{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}"
23+
EndProject
2224
Global
2325
GlobalSection(SolutionConfigurationPlatforms) = preSolution
2426
Debug|Any CPU = Debug|Any CPU
@@ -37,13 +39,18 @@ Global
3739
{59EDB617-CA0F-472B-B107-A4E1694A3691}.Debug|Any CPU.Build.0 = Debug|Any CPU
3840
{59EDB617-CA0F-472B-B107-A4E1694A3691}.Release|Any CPU.ActiveCfg = Release|Any CPU
3941
{59EDB617-CA0F-472B-B107-A4E1694A3691}.Release|Any CPU.Build.0 = Release|Any CPU
42+
{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
43+
{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}.Debug|Any CPU.Build.0 = Debug|Any CPU
44+
{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}.Release|Any CPU.ActiveCfg = Release|Any CPU
45+
{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}.Release|Any CPU.Build.0 = Release|Any CPU
4046
EndGlobalSection
4147
GlobalSection(SolutionProperties) = preSolution
4248
HideSolutionNode = FALSE
4349
EndGlobalSection
4450
GlobalSection(NestedProjects) = preSolution
4551
{AEA7320C-E669-4009-B877-20E49D1D1687} = {666C8D8F-0108-4D22-9FA8-E1C65E42B1E2}
4652
{59EDB617-CA0F-472B-B107-A4E1694A3691} = {666C8D8F-0108-4D22-9FA8-E1C65E42B1E2}
53+
{91541C38-9A34-4AC1-B5F8-BD80DBC5012F} = {666C8D8F-0108-4D22-9FA8-E1C65E42B1E2}
4754
EndGlobalSection
4855
GlobalSection(ExtensibilityGlobals) = postSolution
4956
SolutionGuid = {9F1B7D95-9415-4F7A-849C-FBF83101BECF}

‎README.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,120 @@ string QuillHTMLContent;
147147
}
148148
}
149149
```
150+
151+
### Alternative Using of the BlazoredTextEditor Component
152+
Depending on our use case, we may want to add some styling to the Toolbar or Editor. We can also place the Toolbar below the Editor by setting the BottomToolbar property to ‘true’ in the BlazoredTextEditor component:
153+
```csharp
154+
<style>
155+
.rounded {
156+
border-radius: 8px;
157+
}
158+
.colored-border {
159+
border: 4px solid red !important;
160+
}
161+
</style>
162+
163+
<h1>Blazored.TextEditor Usage Examples</h1>
164+
165+
<h3>Basic Example</h3>
166+
<BlazoredTextEditor
167+
@ref="@richEditor">
168+
<ToolbarContent>
169+
@((MarkupString) toolbar)
170+
</ToolbarContent>
171+
<EditorContent>
172+
@((MarkupString) body)
173+
</EditorContent>
174+
</BlazoredTextEditor>
175+
<br/>
176+
<br/>
177+
178+
<h3>Show the Toolbar Below the Editor</h3>
179+
<BlazoredTextEditor
180+
BottomToolbar="true"
181+
@ref="@richEditor">
182+
<ToolbarContent>
183+
@((MarkupString) toolbar)
184+
</ToolbarContent>
185+
<EditorContent>
186+
@((MarkupString) body)
187+
</EditorContent>
188+
</BlazoredTextEditor>
189+
<br/>
190+
<br/>
191+
192+
<h3>Styled Toolbar</h3>
193+
<BlazoredTextEditor
194+
@ref="@richEditor"
195+
ToolbarCSSClass="rounded colored-border"
196+
ToolbarCssStyle="background: lightpink">
197+
<ToolbarContent>
198+
@((MarkupString) toolbar)
199+
</ToolbarContent>
200+
<EditorContent>
201+
@((MarkupString) body)
202+
</EditorContent>
203+
</BlazoredTextEditor>
204+
<br/>
205+
<br/>
206+
207+
<h3>Styled Editor</h3>
208+
<BlazoredTextEditor
209+
EditorCSSClass="rounded colored-border"
210+
EditorCssStyle="padding: 10px; background: lightpink"
211+
@ref="@richEditor">
212+
<ToolbarContent>
213+
@((MarkupString) toolbar)
214+
</ToolbarContent>
215+
<EditorContent>
216+
@((MarkupString) body)
217+
</EditorContent>
218+
</BlazoredTextEditor>
219+
220+
@code
221+
{
222+
BlazoredTextEditor richEditor = default!;
223+
string toolbar = """"...markup here..."""";
224+
string body = """"...markup here..."""";
225+
226+
protected override void OnInitialized()
227+
{
228+
toolbar = """"
229+
<select class="ql-header">
230+
<option selected=""></option>
231+
<option value="1"></option>
232+
<option value="2"></option>
233+
<option value="3"></option>
234+
<option value="4"></option>
235+
<option value="5"></option>
236+
</select>
237+
<span class="ql-formats">
238+
<button class="ql-bold"></button>
239+
<button class="ql-italic"></button>
240+
<button class="ql-underline"></button>
241+
<button class="ql-strike"></button>
242+
</span>
243+
<span class="ql-formats">
244+
<select class="ql-color"></select>
245+
<select class="ql-background"></select>
246+
</span>
247+
<span class="ql-formats">
248+
<button class="ql-list" value="ordered"></button>
249+
<button class="ql-list" value="bullet"></button>
250+
</span>
251+
<span class="ql-formats">
252+
<button class="ql-link"></button>
253+
</span>
254+
"""";
255+
256+
body = """"
257+
<h4>This Toolbar works with HTML</h4>
258+
<a href="https://BlazorHelpWebsite.com">BlazorHelpWebsite.com</a>
259+
"""";
260+
}
261+
}
262+
```
263+
![examples_screenshot.png](samples%2FTextEditorDemo%2Fwwwroot%2Fexamples_screenshot.png)
150264
### Rich Text Screenshot
151265
![Screenshot](DeltaExample.png)
152266
### Read Only Screenshot

‎samples/TextEditorDemo/App.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView DefaultLayout="@typeof(MainLayout)" RouteData="@routeData"/>
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1"/>
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎samples/TextEditorDemo/MainLayout.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@inherits LayoutComponentBase
2+
3+
<main>
4+
@Body
5+
</main>

‎samples/TextEditorDemo/Pages/Index.razor‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@page "/"
2+
3+
<style>
4+
.rounded {
5+
border-radius: 8px;
6+
}
7+
.colored-border {
8+
border: 4px solid red !important;
9+
}
10+
</style>
11+
12+
<h1>Blazored.TextEditor Usage Examples</h1>
13+
14+
<h3>Basic Example</h3>
15+
<BlazoredTextEditor
16+
@ref="@richEditor">
17+
<ToolbarContent>
18+
@((MarkupString) toolbar)
19+
</ToolbarContent>
20+
<EditorContent>
21+
@((MarkupString) body)
22+
</EditorContent>
23+
</BlazoredTextEditor>
24+
<br/>
25+
<br/>
26+
<h3>Show the Toolbar Below the Editor</h3>
27+
<BlazoredTextEditor
28+
BottomToolbar="true"
29+
@ref="@richEditor">
30+
<ToolbarContent>
31+
@((MarkupString) toolbar)
32+
</ToolbarContent>
33+
<EditorContent>
34+
@((MarkupString) body)
35+
</EditorContent>
36+
</BlazoredTextEditor>
37+
<br/>
38+
<br/>
39+
<h3>Styled Toolbar</h3>
40+
<BlazoredTextEditor
41+
@ref="@richEditor"
42+
ToolbarCSSClass="rounded colored-border"
43+
ToolbarCssStyle="background: lightpink">
44+
<ToolbarContent>
45+
@((MarkupString) toolbar)
46+
</ToolbarContent>
47+
<EditorContent>
48+
@((MarkupString) body)
49+
</EditorContent>
50+
</BlazoredTextEditor>
51+
<br/>
52+
<br/>
53+
<h3>Styled Editor</h3>
54+
<BlazoredTextEditor
55+
EditorCSSClass="rounded colored-border"
56+
EditorCssStyle="padding: 10px; background: lightpink"
57+
@ref="@richEditor">
58+
<ToolbarContent>
59+
@((MarkupString) toolbar)
60+
</ToolbarContent>
61+
<EditorContent>
62+
@((MarkupString) body)
63+
</EditorContent>
64+
</BlazoredTextEditor>
65+
66+
@code
67+
{
68+
BlazoredTextEditor richEditor = default!;
69+
string toolbar = """"...markup here..."""";
70+
string body = """"...markup here..."""";
71+
72+
protected override void OnInitialized()
73+
{
74+
toolbar = """"
75+
<select class="ql-header">
76+
<option selected=""></option>
77+
<option value="1"></option>
78+
<option value="2"></option>
79+
<option value="3"></option>
80+
<option value="4"></option>
81+
<option value="5"></option>
82+
</select>
83+
<span class="ql-formats">
84+
<button class="ql-bold"></button>
85+
<button class="ql-italic"></button>
86+
<button class="ql-underline"></button>
87+
<button class="ql-strike"></button>
88+
</span>
89+
<span class="ql-formats">
90+
<select class="ql-color"></select>
91+
<select class="ql-background"></select>
92+
</span>
93+
<span class="ql-formats">
94+
<button class="ql-list" value="ordered"></button>
95+
<button class="ql-list" value="bullet"></button>
96+
</span>
97+
<span class="ql-formats">
98+
<button class="ql-link"></button>
99+
</span>
100+
"""";
101+
102+
body = """"
103+
<h4>This Toolbar works with HTML</h4>
104+
<a href="https://BlazorHelpWebsite.com">BlazorHelpWebsite.com</a>
105+
"""";
106+
}
107+
}

‎samples/TextEditorDemo/Program.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using Microsoft.AspNetCore.Components.Web;
2+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
3+
using TextEditorDemo;
4+
5+
var builder = WebAssemblyHostBuilder.CreateDefault(args);
6+
builder.RootComponents.Add<App>("#app");
7+
builder.RootComponents.Add<HeadOutlet>("head::after");
8+
9+
builder.Services.AddScoped(sp => new HttpClient {BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});
10+
11+
await builder.Build().RunAsync();

‎samples/TextEditorDemo/TextEditorDemo.csproj‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net7.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.9" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.9" PrivateAssets="all" />
12+
</ItemGroup>
13+
14+
<ItemGroup>
15+
<ProjectReference Include="..\..\src\Blazored.TextEditor\Blazored.TextEditor.csproj" />
16+
</ItemGroup>
17+
18+
</Project>

‎samples/TextEditorDemo/_Imports.razor‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@using System.Net.Http
2+
@using System.Net.Http.Json
3+
@using Microsoft.AspNetCore.Components.Routing
4+
@using Microsoft.AspNetCore.Components.Web
5+
@using Microsoft.AspNetCore.Components.WebAssembly.Http
6+
@using Microsoft.JSInterop
7+
@using TextEditorDemo
8+
9+
@using Blazored.TextEditor

‎samples/TextEditorDemo/wwwroot/css/app.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
h1:focus {
2+
outline: none;
3+
}
4+
5+
#blazor-error-ui {
6+
background: lightyellow;
7+
bottom: 0;
8+
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
9+
display: none;
10+
left: 0;
11+
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
12+
position: fixed;
13+
width: 100%;
14+
z-index: 1000;
15+
}
16+
17+
#blazor-error-ui .dismiss {
18+
cursor: pointer;
19+
position: absolute;
20+
right: 0.75rem;
21+
top: 0.5rem;
22+
}
23+
24+
.blazor-error-boundary {
25+
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
26+
padding: 1rem 1rem 1rem 3.7rem;
27+
color: white;
28+
}
29+
30+
.blazor-error-boundary::after {
31+
content: "An error has occurred."
32+
}

0 commit comments

Comments
 (0)