BTI420 notes – Fri Mar 17 and Mon Mar 20

Rich text editing in a web app. Work on Assignment 8.

 

Rich text editing

rich-text-editorCKEditor is a JavaScript app that replaces an HTML <textarea> element with a nice-looking and highly-functional rich text editor.

As you read this section, open and study the RichTextNotesApp code example.

Here’s what you need to know to use CKEditor:

The editor works with string properties in a view model class.

For best results, add the [DataType(DataType.MultiLineText)] to a string property (in a “…Form” view model class), and at runtime, the Razor view engine will render it as an HTML <textarea> element in a Create or Edit view.

Near the top of the view – maybe below the @ { } code block – add a reference to CKEditor. For best results, get it from its content delivery network:

 

Then, just below the code that renders the text area, convert the HTML <textarea> element into an editor:

 

The code above assumes that the HTML <textarea> element has a name attribute with a value of “Content”.  If you do not need the startupFocus attribute, then remove it.

 

Controller method to handle the HTML Form post

Normally, the ASP.NET runtime prevents HTML markup or script code from being posted to a controller method, for obvious security reasons.

In this situation, we know that the rich text editor will include HTML code, and yes, we do want it. Therefore, we have to add this attribute to the controller method that handles the HTML Form post:

[ValidateInput(false)]

 

Render rich text string properties in the user interface

Normally, string content is HTML encoded when it is displayed in a view (e.g. List, Details, Delete).

In this situation, we want rich text string content to be displayed as-is. Therefore, we must render it with a different HTML Helper. Assuming that the “Content” property is a rich text string, write this code:

@Html.Raw(item.Content)

 

Work on Assignment 8

Your professor will guide students as we get started with, or continue working on Assignment 8.

Before you leave the room at the end of the time slot, ensure that you give the Work Report to your professor, for the in-class grading part of the assignment.

 

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

%d bloggers like this: