Content Editor


To begin use the Summernote NWYSIWYG editor, in the div tag add data-content-editor markup.

These scripts should be present in the template for this feature to work:

@Render("SiteScript", FileName:"af.2016.dataBinding.AfContentEditor.js")
<link href="/lib/summernote/0.8.15/dist/summernote-bs4.min.css" rel="stylesheet">,
<script src="/lib/summernote/0.8.15/dist/summernote-bs4.min.js"> </script>

By default all images and files have private url, user needs to be logged in to be able to see it


The tag must have an id field present for control to properly work.

Available Markups

  • data-content-images="dsImages" - defines datasource where images will be uploaded, also enables images dialog in toolbar.
  • data-content-files="dsFiles" - defines datasource where files will be uploaded, also enables files dialog in toolbar.
  • data-content-type="Simple" - current editor types are: "Simple" and "Advanced". By default it is set to "Simple".
  • data-content-buttons="save,cancel" - adds save/cancel buttons to the editor toolbar.
  • data-content-public - all added images and files will have static route (anyone will be able to see it). Route: static/image/{ArticleID}/{FileName}
  • data-filestore-useviewname - images and files also will have public route. In comparison to data-content-public attribute, the route will use view name, instead of article ID. Only one route attribute needs to be present at the time. Route: api/filestore/{ViewName}/{PrimKey}/{FileName}


Event are attached to the object with the same name as the id defined in the initialized tag.

  • setContent("New content") - sets editor content.
  • getContent() - get editor content.
  • setField() - changes current editor field.
  • setDataObject(dsCode) - changes current editor datasource.

Related articles

Placeholder "LocalizeWeb2016" failed