The package provides persistent inline page editing using CKEditor.
For a quick overview of the library installation and use check the youtube video.
###How it works: The EditableMvc helper will render the specified selected html element and enable the inline editing functionality of CKEditor. Once edited, the content is posted via ajax to a controller action and the data get saved through a repository layer, which can be easily swapped (default storage is xml serialization on filesystem).
###Setup: Firstly download the package using NuGet
PM> Install-Package EditableMvc
The default configuration deployed with the package enable the edit functionality when editablemvc=true is present in the querystring and setup the repository to use files.
public static class EditableMvcBootstrap
{
public static void Start()
{
//Register a custom repository by implementing IEditableRepository
EditableMvcConfig.RegisterRepository = () => new SimpleFileRepository("~/App_Data");
//Register the authorization method used to enable/disable editing on the html element
EditableMvcConfig.RegisterAuthorization = () =>
{
var editable = !string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["editablemvc"]);
if (editable)
{
return Convert.ToBoolean(HttpContext.Current.Request.QueryString["editablemvc"]);
}
return false;
};
}
//After App_Start is executed register the bundles
public static void PostStart()
{
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/editableMvc").Include(
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/ckeditor/ckeditor.js",
"~/Scripts/ckeditor/plugins/editablemvcsave/editablemvcsave.js",
"~/Scripts/editablemvc.js"));
}
}###Use it: Ensure all the required js (and optional style) are registered
@Scripts.Render("~/bundles/editablemvc")
@Styles.Render("~/Content/editablemvcstyle.css")Now that everything is in place, let's try the helper and generate an editable paragraph with some default text
<div id="content">
@Html.EditableMvc("p", "idParagraph", new {@class = "mycssclass", "<strong>Lorem ipsum...</strong>")
</div> 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent