在线编辑组件内容

纸壳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>