时间戳

首页 > 解决方案 > CKEditor 3.6.6：通过粘贴 HTML 源代码添加剧透按钮

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

问题描述

我是一个研究中心的雇员。我没有为我的研究中心创建网站，但我被赋予了向网站添加新登录页面的能力。我可以添加各种 Drupal 构建块（例如，段落类型：文本块），我可以通过 CKEditor（版本 3.6.6）添加/编辑文本。

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

我发现我可以通过单击 Source Code 按钮将 HTML 代码直接粘贴到 CKEditor 中。有没有办法编写一些可以粘贴到 CKEditor 中的 HTML 代码来创建功能性剧透“显示/隐藏”按钮？我在 HTML 或 CKEditor 方面没有经验，如果有任何帮助，我将不胜感激。

标签： htmlckeditor

解决方案

这实际上取决于 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“样式”属性中。

推荐阅读