Blazor and TinyMCE

When talking about Web development in general we usually end up with forms. Why? Because we almost always capture data using plain HTML form. As an example, we may capture name, email address, messages, and more.

For this demo, I have created a Blazor component named: ContactMe.razor. Let’s take a look at the following HTML form I have inside of that component.

@page "/contact"

<h4 class="text-center display-3 mt-3 mb-5">Contact me</h4>
<div class="container mt-3 mb-3">
	<div class="p-3 rounded">
		<form action="" class="mb-2" name="FyardlestContactForm"  netlify>
			<div class="row g-3">
				<div class="col-12 col-md-6">
					<label for="firstName" class="form-label">First Name</label>
					<input type="text"
						   id="firstName"
						   name="firstName"
						   class="form-control"
						   placeholder="Enter your first name"
						   aria-label="First Name"
						   required />
				</div>
				<div class="col-12 col-md-6">
					<label for="lastName" class="form-label">Last Name</label>
					<input type="text"
						   id="lastName"
						   name="lastName"
						   class="form-control"
						   placeholder="Enter your last name"
						   aria-label="Last Name"
						   required />
				</div>
				<div class="col-12 col-md-6">
					<label for="email" class="form-label">Email</label>
					<input type="email"
						   name="email"
						   id="email"
						   class="form-control"
						   placeholder="Your email address"
						   aria-label="email"
						   required />
					<div id="email-no-share"
						 class="form-text text-danger">
						<em class="small ms-2">
							I'll never share your email with
							anyone else.
						</em>
					</div>
				</div>
				<div class="col-12 col-md-6">
					<label for="phone" class="form-label">Phone (optional)</label>
					<input type="phone"
						   name="phone"
						   id="phone"
						   class="form-control"
						   placeholder="Your phone #"
						   aria-label="phone" />
				</div>
				<div class="col-12">
					<label for="message" class="form-label">Message</label>
					<textarea name="message" id="message" rows="5" class="form-control"
							  placeholder="Send me your message" aria-label="message"
							  required></textarea>
				</div>
				<div class="col-12 text-end">
					<button class="btn btn-primary"
							type="submit">
						Submit
					</button>
				</div>
			</div>
		</form>
	</div>
</div>

Note that the @page "/contact" at the top of the component was added for routing purposes. As you can see, this is a simple plain HTML form with Bootstrap, and the end result looks like this:

The message part is just a simple textarea but we can make it look better. 

To do so, please welcome ladies and gentlemen tinyMCE. TinyMCE is a free WYSIWYG HTML editor. Note that WYSIWYG stands for: What You See is What You Get. To know more about the editor you can just visit their website to read the docs :): https://www.tiny.cloud/docs/ 

Using the editor in our Blazor App:

   1. First, let’s the package by clicking on Tools – NuGet Package Manager – Manage NuGet Packages for Solution

    2. In the new screen click on the Browse tab and in the search filed type tinymce, and click on the TinyMCE.Blazor to select it.

     3- Select the project where you want to install the package by tcheking the box, and click the Install button.

4- In the new floating tab click Apply

     5- Now the TinyMCE.Blazor should have a small green check

Now lets set it up to make it works :

Open index.html page in the wwwroot of your app

Side Note : I have the index.html because I have created a Blazor WebAssembly App. If you’ve created a Blazor Web App (for fullstack), you should open the wwwroot – Component – App.razor to see the HTML base template.

At the bottom of the html page, before the closing body tag add the following :

<!-- Add TinyMCE Blazor -->
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

Note that the script for TinyMCE was added before the blazor js script.

In the wwwroot of the app I create a new folder named js :

In the js folder I add the tinymce sdk folder i have downloded from their website (https://www.tiny.cloud/get-tiny/)

Now let’s go back to our ContactMe.razor component and add the following code :

@code {
	// tinyMCE config
	private static Dictionary<string, object> editorConfig = new()
	{
		{ "toolbar", "undo redo | bold italic underline fontsize | link codesample | alignleft aligncenter alignright alignjustify | removeformat " },
		{ "plugins", "anchor autolink link charmap preview table codesample" },
		{ "default_link_target", "_blank"},
		{ "link_assume_external_targets", true},
		{ "link_context_toolbar", true},
		{ "codesample_languages", new object[] {
				new { text = "HTML/XML", value = "markup" },
				new { text = "JavaScript", value = "javascript" },
				new { text = "CSS", value = "css" },
				new { text = "C#", value = "csharp" },
				new { text = "Razor", value = "razor" },
				new { text = "JSON", value = "json" },
				new { text = "Python", value = "python" },
	}
		},
		{ "codesample_global_prismjs", true },
		{ "promotion", false }
	};
}

The only thing we have to do now is to replace the textarea with the tinyMCE  one.

So, let’s replace this :

<textarea name="message" id="message" rows="5" class="form-control" 
   placeholder="Send me your message" aria-label="message" required>
</textarea>

By the following:

<TinyMCE.Blazor.Editor ScriptSrc="/js/tinymce/tinymce.min.js" Conf="editorConfig"/>

Finally, the text area should look like this:

BONUS:

Note that to use it in a component where you are validating data using the EditForm. For this, you will need to have a @bind-value and a Field like the following (this is just an example):

<TinyMCE.Blazor.Editor ScriptSrc="/js/tinymce/tinymce.min.js"
              Conf="editorConfig"
              Field="() => clientProject.Description"
              @bind-Value="clientProject.Description" />
<ValidationMessage For="() => clientProject.Description" />