英语(美国)
  1. 亚博Zendesk帮助
  2. 指南
  3. 帮助中心使用指南
  4. 使用主题和自定义帮助中心

编辑帮助中心文章的源代码

查尔斯Nadeau
  • 编辑
亚博Zendesk文档团队

源代码编辑器允许您编辑帮助中心的文章和内容块的HTML源。这允许您以使用标准所见即所得编辑器无法实现的方式自定义和样式化帮助中心内容。< / p >

为了保证帮助中心的安全并提供最佳的最终用户体验，Zendesk限制了您可以在文章和内容块中使用的HTML。亚博< / p >

本文涵盖以下主题:

支持HTML

本节列出了文章和内容块中支持的HTML元素、属性和内容。除了列出的属性，本节中的HTML元素还支持以下全局属性:< / p >

Id, class, aria-*， data-*， title
重要的是:对于内容块，源编辑器限制使用id和类属性。有关更多信息，请参见HTML对内容块的限制。< / div >
一些HTML元素支持内联风格属性，但只允许支持特定属性的样式声明。例如，跨度元素只允许您设置背景颜色或颜色属性使用内联风格属性。这些属性记录为允许的内联样式。
注意:在大多数情况下，Zendesk亚博建议使用CSS类而不是内联样式来样式化帮助中心内容。看到在帮助文章中样式化HTML。< / div >< / div >

使用以下链接快速跳转到列出的元素:< / p >

一个|简写的|地址|引用|br|标题|引用|代码|上校|colgroup|dd|▽|dfn|div|戴斯。莱纳姆:|dt|新兴市场|figcaption|数字|h1|h2|h3|h4|h5|编辑|人力资源|iframe|img|ins|kbd|李|ol|p|精准医疗|桑普|小|源|跨度|强大的|子|吃晚饭|表格|tbody|道明|tfoot|th|thead|tr|跟踪|ul|var|视频

一个

属性：href，目标，标题，名字，rel

允许的href协议：http，https，mailto，ftp，sftp，短信，电话

内容：@text，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

简写的

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

地址

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

引用

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

br

属性:仅全局属性< / p >< / div >

标题

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

引用

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

代码

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

上校

属性：跨度

colgroup

属性:仅全局属性< / p >

内容：上校

dd

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

▽

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

dfn

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

div

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

戴斯。莱纳姆:

属性:仅全局属性< / p >

内容：dd，道明

dt

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

新兴市场

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

figcaption

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

数字

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，figcaption，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

h1

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

h2

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

h3

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

h4

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

h5

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

编辑

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

人力资源

属性:仅全局属性< / p >< / div >

iframe

属性：src，允许，allowfullscreen，mozallowfullscreen，webkitallowfullscreen，oallowfullscreen，msallowfullscreen，名字，类，宽度，高度，帧边缘

允许的内联样式：纵横比，宽度

src允许的协议：http，https，团，数据

允许嵌入的域：https://content.jwplatform.com/，https://fast.wistia.com/，https://play.vidyard.com/，https://player.vimeo.com/，https://players.brightcove.net/，https://web.microsoftstream.com/，https://www.loom.com/，https://www.microsoft.com/，https://www.youtube-nocookie.com/，https://www.youtube.com/

img

属性：src，alt，名字

允许的内联样式：高度，宽度

src允许的协议：http，https，团，数据

ins

属性：引用，datetime

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

kbd

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

李

属性:仅全局属性< / p >

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

ol

属性：开始，类型，逆转

内容：李

p

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

精准医疗

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

桑普

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

小

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

源

属性：src，类型

src允许的协议：http，https，团，数据

跨度

属性：名字

允许的内联样式：背景颜色，颜色

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

强大的

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

子

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

吃晚饭

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

表格

属性:仅全局属性< / p >

内容：标题，colgroup，tbody，tfoot，thead，tr

tbody

属性:仅全局属性< / p >

内容：tr

道明

属性：colspan，行宽

允许的内联样式：高度，text-align，vertical-align，宽度

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

tfoot

属性:仅全局属性< / p >

内容：tr

th

属性：colspan，行宽，范围

允许的内联样式：高度，text-align，vertical-align，宽度

内容：@text，一个，简写的，地址，引用，br，引用，代码，▽，dfn，div，戴斯。莱纳姆:，新兴市场，数字，h1，h2，h3，h4，h5，编辑，人力资源，iframe，img，ins，kbd，ol，p，精准医疗，桑普，小，跨度，强大的，子，吃晚饭，表格，ul，var，视频

thead

属性:仅全局属性< / p >

内容：tr

tr

属性:仅全局属性< / p >

内容：道明，th

跟踪

属性：默认的，种类，标签，src，srclang

src允许的协议：http，https，团，数据

ul

属性:仅全局属性< / p >

内容：李

var

属性:仅全局属性< / p >

内容：@text，一个，简写的，br，引用，代码，▽，dfn，新兴市场，iframe，img，ins，kbd，桑普，小，跨度，强大的，子，吃晚饭，var，视频

视频

属性：src，高度，宽度，控制

src允许的协议：http，https，团，数据

内容：源，跟踪

空HTML容器元素

亚博Zendesk自动删除大多数空容器元素，例如我或跨度。这些元素通常必须包含要呈现的内容。亚博Zendesk不删除空p标签。相反，Zendesk插入亚博,作为元素的内容。例子:< / p >

< p >, < / p >

不安全的HTML

默认情况下，Zendes亚博k认为以下HTML元素是不安全的。< / p >

不安全的HTML元素 
小程序，按钮，嵌入，表单，输入，对象，脚本，文本区域，样式

处理文章中不安全的HTML

对于文章，源代码编辑器不会删除不安全的HTML元素或不受支持的HTML属性。相反，它们被排除在用于呈现帮助中心文章的HTTP响应中。因此，文章可能无法按预期呈现。< / p >< / div >< / div >

允许不安全的HTML出现在文章中

您可以覆盖默认设置，以允许在帮助中心文章中出现不安全的HTML。此设置不会影响内容块中的不安全HTML。< / p >

警告:当用户在浏览器中打开一篇文章时，这样做将允许潜在的恶意代码被执行。< / p >

允许在HTTP响应中使用不安全的HTML

  1. 在指南中，单击设置图标()。
  2. 下安全，选择显示不安全内容选择。
  3. 点击更新。

处理内容块中的不安全HTML

对于内容块，源代码编辑器会删除不安全的HTML元素和不受支持的属性。不安全元素中的内容放在p元素，如未知的HTML。你不能允许不安全的HTML出现在内容块中。< / p >< / div >< / div >< / div >

未知的HTML

任何不受支持或不安全的HTML元素都被认为是未知的。亚博Zendesk删除任何未知的标签，并将标签的内容放在p元素。< / p >

例如，下面的HTML包含一个unknownmytag元素。
< mytag > Hello world !< / mytag >

在用于呈现帮助中心的HTTP响应中mytag元素被移除。它的内容被放置在p元素。< / p >

< p > Hello world !< / p >

在帮助文章中样式化HTML

如果可能的话，Zendesk推荐亚博使用类属性和相关的CSS类来样式化帮助中心文章中的HTML。CSS类应该在帮助中心主题中定义。有关更多信息，请参见自定义帮助中心主题。< / p >

在为帮助中心主题创建CSS规则时，请避免使用嵌套选择器，例如Div.container > p > img。这样的规则很难维护，并且可能针对意想不到的元素。相反，应该使用直接为类设置样式的选择器，例如.container-image。类直接添加到受影响的HTML元素中类元素。例如:

避免使用风格属性将内联样式应用于HTML元素。内联样式很难维护，并且可能导致样式不一致。< / p >< / div >< / div >

HTML对内容块的限制

对于内容块，源代码编辑器将删除任何id或类属性，但有以下例外:
  • 标题标签，例如< h2 >，保留他们的id属性。
  • < div >标签保留它们的类属性。
    回到顶端

    17日评论

    • 茱莉亚Shyshliuk

      嗨，Z亚博endesk团队，我能找到一些通用的资源来学习如何使用Zendesk指南文亚博电脑端章中的框架吗?< / p >< / >节

      0
    • 罗素Chee
      亚博Zendesk客户服务

      嘿,茱莉亚,< / p >

      感谢您就您的问题联系Zendesk Support，我亚博希望您一切顺利。我希望目前在Zendesk Guide文章中使用iframe不被支持作为预期的工作流程。亚博有第三方资源，可能能够帮助作为一个解决方案，亚博电脑端但不幸的是，我们没有任何本地文章，可以在这方面提供帮助。如果您有任何其他问题或需要任何其他东西，请告诉我!< / p >

      罗素< / p >< / div >< / >节

      0
    • Kat Thorson

      那么，在这个代码中，什么被认为是“不安全的”，因为它似乎被用于创建注释或警告框的任何地方?当我使用此代码创建备注框时，它不会出现在发布的文章中，因为“显示不安全的内容”已关闭。< / p >

      < >节
      < span style="background-color: #daf0ff;填充:15 px;" >

      示例文本在这里


      < / div >
      < / >节< / p >< / >节
      1
    • 戴夫·戴森

      嗨,凯特,< / p >

      正如文章所说，任何未包含在上述列表中的标记或属性都被认为是不安全的;在您的情况下，这将包括部分标签，和背景颜色和填充属性。< / p >

      但是，您可以实现几乎相同的结果，而不必启用不安全的内容，只需在主题的style.css文件中添加一个类，然后在文章中引用它(因为类标签是认为是安全的)。例如，如果在style.css文件中添加如下内容:< / p >

      .warning-box {
      background - color: # daf0ff;
      填充:15 px;
      }< / p >

      然后取代你的文章html与此:< / p >

      < div class = "警告框”>

      示例文本在这里


      < / div >< / p >

      然后，您的警告框将出现在您发表的文章中:< / p >

      1
    • 凯丝

      你好,< / p >

      我们的帮助中心被设置为显示不安全，并与我们使用的css一起< / p >

      .oashide {
      显示:没有;
      }< / p >

      为了隐藏一些内容，我们正在准备发布之前。< / p >

      这在浏览器中工作得很好，并且文章不会显示隐藏的内容。但是，页面上显示的帮助Web小部件在显示文章时显示隐藏的内容，并且css被剥离。< / p >

      有什么建议，以防止隐藏的内容显示通过网络小部件?< / p >< / >节

      0
    • 格雷格Katechis
      亚博Zendesk开发者倡导

      你好凯丝!实现这一目标的一种方法是过滤小部件中的帮助中心内容。它是一个包容性过滤器，所以有点麻烦，但是你可以把你想要隐藏的内容分割到它自己的类别中，然后只显示其他类别的内容。你可以在这篇文章。< / p >< / >节

      0
    • 凯丝

      嗨,格雷格,< / p >

      谢谢你！我们隐藏的内容在文章中，我们希望在文章的其余部分显示，因此我们使用-< / p >

      隐藏文本
      < / p >

      你的回应，如果我理解，建议它需要在一个单独的文章在一个单独的类别，我们想要避免。那么我假设帮助中心web小部件将剥离这些css是正确的吗?我很困惑，因为我找到的所有文章都说使用css而不是html来隐藏内容应该有效。< / p >< / >节

      0
    • 格雷格Katechis
      亚博Zendesk开发者倡导

      啊，对不起……不知何故，我只关注了你评论的一个方面，而忽略了你所问问题的关键。我的解决方案绝对不是你想要的。< / p >

      老实说，我还没有遇到小部件对CSS做任何不同的事情，但它完全有可能这样做。我要用我的账户做些测试，看看我能不能想出一些对你有用的东西。不管怎样，我一小时内会给你答复的!< / p >< / >节

      0
    • 格雷格Katechis
      亚博Zendesk开发者倡导

      只是为了让我可以确保我们使用相同的设置，你有一个链接到一个页面，你的小部件部署?如果你不能在这里分享，请告诉我，我可以为我们创建一个私人机票。< / p >< / >节

      0
    • 凯丝

      谢谢你！我将不得不给你登录访问我们的测试数据库，所以私人门票将是伟大的，然后我会给你一个链接的教程/文章在kb浏览器和登录，这样你就可以搜索相同的教程在web小部件。< / p >

      0
    • 情人节

      你好,< / p >

      我在style.css文件中添加了这个类，然后按照Dave Dyson的指导在一篇文章中使用了它。现在在我的帮助中心是正确的，但是这个代码没有显示在web小部件帮助中心。< / p >

      是否有一个特定的操作来做，以确保web小部件显示相同的我的帮助中心?< / p >

      谢谢你的帮助。< / p >< / >节

      0
    • 操作支持
      • 编辑

      更新:要找到这个设置，它实际上是< / p >

      1.在“指南”的侧边栏上，单击“设置”图标。
      2.在“指南设置>安全”下，单击“显示不安全内容”复选框。
      3.单击更新。< / p >< / >节

      0
    • 斯特凡诺Volpe

      嗨！门票的安全标签和属性是否与这里列出的相同?或者可能有两个不同的列表?< / p >< / >节

      0
    • Gorka Cardona-Lauridsen
      亚博Zendesk产品经理

      @……看一看欢迎在Zendesk支持WhatsApp亚博。< / p >

      如果你在那里找不到你需要的东西，你应该使用右下角的聊天联系我们的支持。

      0
    • 大卫Bjorgen

      “安全”列表缺少一些语义HTML元素:< / p >

      • 数字
      • figcaption
      • 马克
      0
    • 艾伦•布莱尔
      注意:即使您的帮助中心不删除安全标记，帮助中心中使用的第三方HTML文章编辑器(TinyMCE)也可能从HTML中删除一些安全标记。例如，编辑器删除<我>没有内容的标记，例如用于字体太棒了图标。< / div >

      有人知道有什么解决办法吗?< / p >

      0
    • 大卫Bjorgen

      艾伦•布莱尔你可以在标签中包装Font Awesome而不是标签。在某些情况下，例如表，空标记被删除，因此您必须在中添加一个不中断的空格( )。< / p >< / >节

      0

    请登录留下评论。< / p >

    由Zendesk提供支亚博持