Downlaod Link
Minimal Rich Text Editor With jQuery And FontAwesome
Just a quick recap we will first we will create a new asp.net core mvc application and add a model class file.
public class FormTextData
{
public string Content { get; set; }
}
After creating the model class file, we will add a controller class file and add HttpGet method as shown below. [HttpGet]
public IActionResult Index()
{
FormTextData formTextData=new FormTextData();
return View(formTextData);
}
In above HttpGet code I have passed the object of model class. Now we will create a view and add the below code. @model FormTextData;
@{
ViewData["Title"] = "Index";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="~/css/richtext.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="~/js/jquery.richtext.min.js"></script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div class="page-wrapper box-content">
<label for="example">Content</label>
@Html.TextAreaFor(m => m.Content, new { @class = "content" })
</div>
<input type="submit" value="Submit" />
}
<script>
$('#Content').richText();
</script>
You can download the CSS and JavaScript library or the project. Now let's create a HttpPost method.[HttpPost]
public IActionResult Index(FormTextData formTextData)
{
string value = formTextData.Content;
return View(formTextData);
}
In above code I have passed the Model class as a parameter. One thing we need to check the name of TextAreaFor control name and the model class file property both are same. This will make us to get the user added value at controller end of RichTextbox at controller end. Now let's put a break point and check the output.Now let's add some value in click on submit value.
Now press F5 to check the final output to display in view.