Body (OrchardCore.Html)

Theming

Shapes

将HtmlBodyPart附加到内容类型时,将呈现以下形状(Shapes)

Name Display Type Default Location Model Type
HtmlBodyPart Detail Content:5 HtmlBodyPartViewModel
HtmlBodyPart Summary Content:10 HtmlBodyPartViewModel

HtmlBodyPartViewModel

HtmlBodyPartViewModel类提供以下属性。

Property Type Description
Body string The content that was edited. It might contain tokens.
Html string The HTML content once all tokens have been processed
ContentItem ContentItem The content item of the part
HtmlBodyPart HtmlBodyPart The HtmlBodyPartinstance
TypePartSettings HtmlBodyPartSettings The settings of the part

HtmlBodyPart

HtmlBodyPart上提供了以下属性

Name Type Description
Body string The HTML content in the body. It can contain Liquid tags so using it directly might result in unexpected results. Prefer rendering the HtmlBodyPart shape instead
Content The raw content of the part  
ContentItem The content item containing this part  

Editors

HtmlBody Part编辑器对于每种内容类型可以是不同的。 在内容类型的HtmlBody Part 设置中,只需选择需要使用的设置即可。

有两个预定义的编辑器名称:

  • Default是默认使用的编辑器
  • Wysiwyg是提供WYSIWYG体验的编辑器

Custom Editors

自定义编辑器可能意味着用不同的体验替换预定义的编辑器,或者为用户提供可供选择的新选项。

要创建新的自定义编辑器,需要提供两个形状模板( shape templates),一个用于提供编辑器的名称(如果要覆盖现有编辑器,则为可选),以及用于呈现编辑器的实际HTML格式。

Declaration

要声明新编辑器,请创建名为HtmlBody_Option__{Name}的格式,其中{Name}是您选择的值。 这将由一个名为的文件表示 HtmlBody-{Name}.Option.cshtml.

Sample content:

@{
string currentEditor = Model.Editor;
}
<option value="Wysiwyg" selected="@(currentEditor == "Wysiwyg")">@T["Wysiwyg editor"]</option>

HTML Editor

要定义从设置中选择编辑器时要呈现的HTML,可以创建与文件Body-{Name} .Editor.cshtml 对应的名为HtmlBody_Editor __ {Name}的格式。

Sample content:

@using OrchardCore.Html.ViewModels;
@model HtmlBodyPartViewModel <fieldset class="form-group">
<label asp-for="Body">@T["Body"]</label>
<textarea asp-for="Body" rows="5" class="form-control"></textarea>
<span class="hint">@T["The body of the content item."]</span>
</fieldset>

覆盖预定义的编辑器

您可以通过创建名为HtmlBody.Editor.cshtml的文件来覆盖默认编辑器的HTML编辑器。 Wysiwyg编辑器是使用名为HtmlBody-Wysiwyg.Editor.cshtml的文件定义的。

鸣谢

Trumbowyg

https://github.com/Alex-D/Trumbowyg
Copyright (c) 2012-2016 Alexandre Demode (Alex-D)
License: MIT

原文链接:https://www.cnblogs.com/Qbit/p/9746477.html

Orchard Core 文档翻译 (六)HTML的更多相关文章

  1. Orchard Core 文档翻译 (二)代码生成模板 Code Generation Templates

    Code Generation Templates 翻译原文:https://www.cnblogs.com/Qbit/p/9746457.html转载请注明出处 Orchard Core Templ ...

  2. Orchard Core 文档翻译 (三) Orchard Core Modules

    原文连接:https://www.cnblogs.com/Qbit/p/9746442.html 转载请注明出处 介绍 Orchard Core Modules库提供了一种机制,可以拥有一个独立的模块 ...

  3. Orchard官方文档翻译(六) 建立你的第一个Orchartd站点

    让我们开始 该主题内容已在Orchard1.8Release版本下测试通过. 这里通过向导式的教程来告诉大家Orchard的功能如何使用.如果你是第一次使用Orchard,该文档就是为你而准备的! O ...

  4. Orchard Core 文档翻译 (七)Contents

    CMS Modules »Contents Contents (OrchardCore.Contents) 此模块提供内容管理服务. Liquid 您可以使用“content ”属性从liquid 视 ...

  5. Orchard Core 文档翻译 (五)自动路由 Autoroute (OrchardCore.Autoroute)

    Autoroute (OrchardCore.Autoroute) 此模块允许您为内容项指定自定义URL(永久链接 permalink). Autoroute Part 将此部分附加到内容类型以指定内 ...

  6. Orchard Core 文档翻译 (四)CMS ModulesTitle (OrchardCore.Title)

    Title (OrchardCore.Title) 标题模块提供Title Part ,允许用户定义内容项的标题.它还定义了ContentItemMetadata方面的DisplayText属性 Th ...

  7. Orchard core 中文文档翻译系列

    本系列翻译顺序完全参照 官方顺序 原文地址:https://orchardcore.readthedocs.io/en/latest/ Orchard Core 中文文档翻译(一)关于Orchard ...

  8. Orchard Core 中文文档翻译(一)关于Orchard Core

    原文连接:https://www.cnblogs.com/Qbit/p/9746363.html 转载请注明出处 翻译说明:本系列为直译,按照官方的计划现在这个版本(2018年10月5日)已经接近最终 ...

  9. Orchard Core一分钟搭建ASP.NET Core CMS

    Orchard Core 是Orchard CMS的ASP.NET Core版本. Orchard Core是全新一代的ASP.NET Core CMS. 官方文档介绍:http://orchardc ...

随机推荐

  1. UVA - 11404

    题意:求任意删除字符后所形成的最长回文,并输出字典序最小的方案 把原串反转求LIS,因为转移时不断求字典序最小导致后半部分可能并非回文,所以要前半部分输出两边 话说这方案保存可真暴力 #include ...

  2. UVALive - 6952 DP 分段/隔板

    题意:商品总价按四舍五入计算,n个物品最多可分\(d+1\)段,求最小代价 \(dp[i][j]\):\(j\)个物品分\(i\)段 注意一个技巧是只在需要分出新的段时才四舍五入(旧段结算),这样就避 ...

  3. [转] Java:对Scanner的useDelimiter()方法的疑问

    [From]https://segmentfault.com/q/1010000003885362 Windows下,我们在键盘上按下Enter键,实际上输入的是回车和换行两个字符:\r\n,ASCI ...

  4. Python——爬取瓜子二手车

    # coding:utf8 # author:Jery # datetime:2019/5/1 5:16 # software:PyCharm # function:爬取瓜子二手车 import re ...

  5. html简单布局

    转载:https://jingyan.baidu.com/article/ca41422f7e52831eae99eda2.html

  6. ubuntu18.04 与 python

    Ubuntu安装pycharm专业破解版方法 首先我们要下载pycharm的安装包, 地址为https://www.jetbrains.com/pycharm/download/#section=li ...

  7. rsync 问题总结

    Rsync服务常见问题汇总讲解:==================================1. rsync服务端开启的iptables防火墙  [客户端的错误]   No route to ...

  8. mac安装monkey工具

    一.monkey测试简介: monkey工具是Android自动化测试工具的一种,主要对Android,APP可进行压力测试.(总结) Monkey是Android中的一个命令行工具,可以运行在模拟器 ...

  9. 15019:Only the instance admin may alter the PermSize attribute

    15019:Only the instance admin may alter the PermSize attribute TimesTen提示空间不足,增加空间重启后提示15019:Only th ...

  10. Linux之FTP篇

    内容简介: vsftpd的安装 目录介绍 配置参数解释 锁定用户目录 其他用户不能登录 -------------------------------------------------------- ...