Tip:
Highlight text to annotate it
X
In this video we'll cover all the basics of customizing the ASP.NET MVC HtmlEditor extension:
starting from adding the extension into the project to diving deeper into an overview
of its settings. Here I have a project with the HomeController and Index View with some
HTML markup. Let's look at it in the browser. Here you can see, that the content area only
contains the text I just mentioned. So, Let's return to Visual Studio. To add the extension
to my View, let’s right-click at the position in the view where I want to insert the DevExpress
HTML editor extension. Then I'll select the "Insert DevExpress MVC Extension" item from
the context menu and The Insert Extension Wizard opens. In the "Common" tab I select
the HtmlEditor. I leave the default extension name and its partial view name….Leave all
the options enabled, and click "Insert". The Insert Extension Wizard generates all the
necessary code for me. You can see that the view code has been changed and In the output
window I can see what files have been changed or created. Let's take a look at the result
in the browser. As you can see, the HtmlEditor appears. It's fully functional, and it displays
several toolbars and an edit area. I can add some text here. See the text's HTML code.
And also see the preview of how it will be rendered in the browser. Next, I can return
to design view, change any text and then see that the text HTML has been updated automatically.
Let's return to Visual Studio and see what the wizard generated for me. In the output
window I select the output from the DevExpress extension integrator. Here, I see the View
code has been modified by the wizard. It has inserted a link to the PartialView. I can
double click the output item and navigate to the changed code. You can see that the
actions and helpers have been added to the controller class. Here you can see that the
wizard has already added the code that handles the HtmlEditor callback route values and image
uploading. Let's take a look at the partial view code and the controller code at the same
time side by side. The callback route values are handled by the "HtmlEditorPartial" action.
The callback route values for the image uploading operation is handled by the corresponding
action. The Image Selector settings are defined in the controller helper. This helper contains
settings that define paths to the uploads and thumbnails folders, allowed file extensions,
etc. Note, that the wizard inserted all this code automatically, so I don't have to type
this code manually. Let's take a look at the HomeController code. The helper, that contains
the HtmlEditor settings, defines the path to the image folders. Let's add the corresponding
folders to make these paths valid. In order to have the ability to upload images, we need
to place the HtmlEditor into the form. Let’s do this with the "using (Html.BeginForm())"
statement. Let's take a look at the possible HtmlEditor settings. I go to the View code
and type "settings...". And Visual Studio IntelliSense shows all the available settings.
I can define the extension's Height, and the "Html" property is a string that represents
the HtmlEditor's content. The HTML Editor provides you with several settings for items
like the editors forms, the image selector, loading panel, SpellChecker and more."Settings"
provide access to the HtmlEditor's main settings; "SettingsDocumentSelector" - Provides access
to the document selectors dialog settings. "SettingsForms" - Provides access to settings
related to customized built-in dialog forms. "SettingsHtmlEditing" - provide access to
settings that relate to editing the html markup. "SettingsImageSelector" - Provides access
to settings that relate to Image Select dialog. "SettingsImageUpload" - Provides access to
settings that relate to uploading images. "SettingsLoadingPanel" - Provides access to
the loading panel's settings. "SettingsResize" - Provides access to settings that relate
to HtmlEditor's sizing capabilities. "SettingsSpellChecker" - Provides access to the spelling settings
for checking the HtmlEditor's content. "SettingsText" - Provides access to settings that define
texts displayed in different elements of the HtmlEditor. "SettingValidation" - Provides
access to content validation settings. Let's modify the extension's width. To do this,
I change the Width property value to 700 pixels. Let's take a look at the result in browser.
I can click "Insert Image" button and the image selector dialog appears. I open a new
tab where I can find any image, copy it's address and return to the HTML Editor. I paste
the image URL and the image appears within the HtmlEditor. I can click the "Insert Image"
button again and the image selector dialog appears. Now I choose image uploading from
my local computer. I click "Browse", select an image from my local file system and click
"select". The HtmlEditor now displays two images. You can see the Html code or the preview.
lets close the browser and return to VisualStudio. Next, Let's simplify the HtmlEditor layout.
I delete the code for image uploading and add the code I prepared before. In this code,
I add toolbars for selecting the font name and size. I also add several useful buttons.
Let's take a look at the result in browser. Here you can see that the HtmlEditor layout
has been modified. Now I can select the required font name and size. I can also justify text
to left, right, or center. And that's it. Thanks for watching and thank you for choosing
DevExpress.