MVC Custom Editor Tutorial and/or Manual

Question

Here's the deal. I am trying to make my own rich text editor for MVC.

There are a hundred tiny, quick tutorials that show me how to do a formatted datetime, or some insignificant thing.

What I want is to ne able to create my own editor that:

1. Can be called on many different EF fields in the app
2. isn't named after a simple type (like "string")
3. Can drop-in as a replacement for @azzedinehtmlsql .Editorfor.

I DO NOT have $650 to license one of these from any of the vendors on NuGet.

I also want to learn the procedures.

Everything I am trying is failing to compile or failing at runtime

Nothing works like the tutorials show.

WHERE is the definitive manual that shows how all this stuff works?

Visual Studio Pro 2019
MVC 5 (I think, there's no real way to tell)
Entity Framework
NOT CORE.

shared\views\WYSIWYG.cshtml
@默 string <---intellisense balks at this
<div style="display:inline-flex">
<div style="width:100%; height: 24px; border:1px solid red; background-color:silver;" id="toolbar">
TOOLS GO HERE
</div>
<div style="display:block;">
@azzedinehtmlsql .TextBox("", Model); <--- this throws a null reference exception. There is also no way to get a field name from a "string", none of the tutorials cover this.
</div>
</div>

... and in the model...

        [UIHint("WYSIWYG")]  
        public string text { get; set; }  

...and in the page view...

@using (Html.BeginForm())  
{  
    @Html.AntiForgeryToken()  
    @:Editor here  
    <br />  
    @Html.EditorFor(d => Model.text)  <--- null reference pops here.  
    <br />  
    @:And, we're back  
}  

Answer 1

Hi @Bryan Valencia ,
Hope the documentation below helps you.
https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editor-templates
https://www.codeguru.com/dotnet/using-display-templates-and-editor-templates-in-asp-net-mvc
https://www.dalsoft.co.uk/blog/index.php/2010/04/26/mvc-2-templates/#Adding_Your_Own_Editor_Template
https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/getting-started-with-ef-using-mvc

According to your example, You don't have to create a custom class for your Editor Template to consume -- just use a string.
You can refer to the following code:
In your model:

public class RegisterModel  
{  
    [Required]  
    public string UserName { get; set; }  
}  

And your template would look something like this (be sure to name it "String.cshtml"):

@model System.String  
  
@Html.LabelFor(model => model, (string)ViewData["LabelText"])  
@Html.TextBoxFor(model => model)  

Then in your view:

@Html.EditorFor(model => model.UserName, new {LabelText = "Test" })  

Regarding ValidationMessageFor, this can be added to your template as well:

@Html.ValidationMessageFor(model => model)  

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

This feature does not exist in MVC or server side in general. If you want a rich editor, then you need to pick a JavaScript library that implements one.

https://www.tiny.cloud/
https://ckeditor.com/

Answer 3

This feature does not exist in MVC or server side in general. If you want a rich editor, then you need to pick a JavaScript library that implements one.

https://www.tiny.cloud/
https://ckeditor.com/