diff --git a/Blazored.TextEditor.sln b/Blazored.TextEditor.sln index 2d17be2..fa3ebfd 100644 --- a/Blazored.TextEditor.sln +++ b/Blazored.TextEditor.sln @@ -1,7 +1,7 @@  Microsoft Visual Studio Solution File, Format Version 12.00 -# Visual Studio Version 16 -VisualStudioVersion = 16.0.29519.87 +# Visual Studio Version 17 +VisualStudioVersion = 17.12.35527.113 MinimumVisualStudioVersion = 10.0.40219.1 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazored.TextEditor", "src\Blazored.TextEditor\Blazored.TextEditor.csproj", "{A76F9184-D5C2-42AE-9BFA-BDF33A3B1434}" EndProject @@ -13,10 +13,11 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "samples", "samples", "{666C EndProject Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{5DCD4124-DAD2-4777-92CB-16ABA93847C1}" ProjectSection(SolutionItems) = preProject - DeltaExample.png = DeltaExample.png - HTMLExample.png = HTMLExample.png - InlineEditingExample.png = InlineEditingExample.png + docs\images\DeltaExample.png = docs\images\DeltaExample.png + docs\images\HTMLExample.png = docs\images\HTMLExample.png + docs\images\InlineEditingExample.png = docs\images\InlineEditingExample.png README.md = README.md + docs\images\SyntaxHighlighterExample.png = docs\images\SyntaxHighlighterExample.png EndProjectSection EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TextEditorDemo", "samples\TextEditorDemo\TextEditorDemo.csproj", "{91541C38-9A34-4AC1-B5F8-BD80DBC5012F}" diff --git a/README.md b/README.md index d0d31bc..9d271a2 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,28 @@ # Blazored TextEditor -Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com") -![Screenshot](HTMLExample.png) + -### Sample Applications +[![Blazor](https://img.shields.io/badge/blazor-5C2D91.svg?style=for-the-badge&logo=blazor&logoColor=white)](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) [![C#](https://img.shields.io/badge/c%23-239120.svg?style=for-the-badge&logo=c-sharp&logoColor=white)](https://learn.microsoft.com/en-us/dotnet/csharp/) + +[![Build & Test Main](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml) +[![Build & Test PR](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml) +[![CodeQL](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml) +[![Release Drafter](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml) + +> Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com") + +![HTML Example](docs/images/HTMLExample.png "HTML Example]") + +## Sample Applications * [Simple blogging application written in Microsoft Server Side Blazor](https://github.com/ADefWebserver/Blazor-Blogs "Blazor Blogs") - [Contains an example of uploading images] -### Helpful Articles +## Helpful Articles * [Creating Reusable Custom Blazor Controls](https://blazorhelpwebsite.com/ViewBlogPost/11 "BlazorHelpWebsite.com") * [Creating A Rich Text Editor In Blazor Using Quill](https://blazorhelpwebsite.com/ViewBlogPost/12 "BlazorHelpWebsite.com") -### Installing +## Installing You can install from NuGet using the following command: @@ -20,7 +30,8 @@ You can install from NuGet using the following command: Or via the Visual Studio package manger. -### Setup +## Setup + Blazor Server applications will need to include the following CSS and JS files in their `Pages\_Host.cshtml` (or `Pages/_Layout.cshtml` if using .Net 6). In the `head` tag add the following CSS. @@ -61,6 +72,7 @@ Below is a list of all the options available on the Text Editor. - `Placeholder` (Optional - Default: `Compose an epic...`) - The text to show when editor is empty. - `Theme` (Optional - Default: `snow`) - Use `snow` to show the Toolbar on top of the editor, and `bubble` for inline editing. - `DebugLevel` (Optional - Default: `info`) - Determines the level of debug information returned to the web browser console window. Options are `error`, `warn`, `log`, or `info`. +- `Syntax` (Optional - Default: `false`) - The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting. **Methods** @@ -72,9 +84,13 @@ Below is a list of all the options available on the Text Editor. - `InsertImage` (`string`) - Inserts an image at the current point in the editor. - `InsertText` (`string`) - Inserts text at the current point in the editor. +## Basic Example + +(see code in the [`Index.razor` page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples) + +
+Code -### Basic Example -(see code in the [Index.razor page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples) ```cs @using Blazored.TextEditor @@ -148,8 +164,15 @@ string QuillHTMLContent; } ``` +
+ ### Alternative Using of the BlazoredTextEditor Component -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: + +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: + +
+Code + ```csharp