Question

我是研究中心的一名员工。我没有为研究中心创建网站，但是可以将新的着陆页添加到网站中。我可以添加各种Drupal构建块（例如，段落类型：文本块），也可以通过CKEditor（版本3.6.6）添加/编辑文本。

在给定的文本块中，我希望能够添加一个扰流板的“显示/隐藏”按钮，用户可以单击该按钮以显示/隐藏页面上的一段文本。我为此找到了一个CKEditor插件（https://github.com/zetamen/ckeditor-spoiler）。但是，我不是该网站的管理员，因此无法添加新插件。

我发现可以通过单击“源代码”按钮将HTML代码直接粘贴到CKEditor中。有没有一种方法可以编写一些可以粘贴到CKEditor中的HTML代码，以创建功能强大的“显示/隐藏”按钮？我没有HTML或CKEditor的经验，我将不胜感激。

Answer 1

这实际上取决于CKEditor对您的输入具有何种安全级别；通常，诸如javascript之类的内容可能会被自动删除以避免javascript注入攻击。

如果您的文本未过滤，并且允许您输入脚本标签，则可以使用以下CDN：

<script src="https://cdn.jsdelivr.net/gh/cferdinandi/houdini/dist/js/houdinijs.polyfills.js"></script>

<script>
(function() {
var disclosure = new Houdini('[data-houdini]');
})();
</script>

<div data-houdini data-houdini-button="Show More" id="show-me">
  <p>Now you see me, now you don't.</p>
</div>

=======

以您当前的权限来假设以上是不可能的...

我假设您至少可以添加CSS样式。在这种情况下，您可以使用以下HTML5和CSS3创建可折叠的文本块：

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
  display: block;
  text-align: center;
  padding: 1rem;
  background: #FAE042;
  cursor: pointer;
}

.lbl-toggle:hover {
  color: #7C5AFF;
}



.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 350px;
}

.collapsible-content .content-inner {
  background: rgba(250, 224, 66, .2);
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">Click my title</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        Because of the custom data model used in the editor, the source mode makes little sense in CKEditor 5. CKEditor 5 is a content editor, not a page builder and, unless some editor feature (plugin) supports some particular kind of HTML (or any other input format), it will not be accepted as content.
      </p>
    </div>
  </div>
</div>

请注意，我们用CSS屏蔽了一个复选框，以保持按钮的状态。

您可以尝试在标记中输入CSS并查看是否允许使用，或者如果不起作用，可以尝试将所有这些都包含在内联CSS“样式”属性中。

CKEditor 3.6.6：通过粘贴HTML源代码来添加剧透按钮

1 个答案: