概念/述语

从这里开始

数据库

开发入门

主题模板

程序扩展

其它

使用介绍

纸壳CMS企业版支持在线编辑内容,让组件支持在线编辑也非常简单,只需要在模板上做好对应的标记即可。

首先我们来看一下HTML组件的例子,Widget.HTML.cshtml

@model ZKEACMS.Common.Models.HtmlWidget
<div class="html-widget" property="true" method="html" data-property="HTML">
    @Html.Raw(Model.HTML)
</div>

这里需要注意property="true"method="html"data-property="HTML"这三个属性标记。

  • property="true":表示是属性,即可编辑
  • method="html":表示该属性支持HTML并使用HTML编辑器,在更新时将调用html()方法来取得属性的内容。相当于:$(".html-widget").html()。如果是纯文本,则使用text
  • data-property="HTML":将取到的内容更新到组件实体的HTML属性中。

这样,在页面设计的时候就可以直接编辑页面内容了。

如果是图片,我们将要取图片的src属性作为图片的地址。我们使用attr方法来取src属性。

<img property="true" 
data-property="ImageUrl" 
method="attr"
para="src"
src="@Url.PathContent(Model.ImageUrl)"/>

对于链接,因为有两个属性需要更新,一个是链接地址,一个是链接文字,所以可以使用嵌套的方式来更新两个字段:

<a property="true" 
   method="attr" 
   para="href" 
   data-property="Href" href="@Url.CultureContent(Model.Href)">
   <span property="true" method="text" data-property="InnerText">
       @Model.InnerText
   </span>    
</a>

微信公众号