在不允许使用 CSS 类的 HTML 编辑器中使用 CSS

编程问答 2022-12-09

问题描述

我正在使用 Moodle 向课程添加内容。我想使用使用 CSS 和 Javascript 的手风琴，就像在此处的示例 (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion) 中一样。但是，HTML 编辑器无法识别这些类——它们在保存代码时就会消失。我工作的学校不想支持 CSS，有什么我可以做的事情吗？

解决方法

我从未听说过 Moodle 编辑器。但是，我相信您应该能够更改它的设置以使用 CSS。我有点怀疑 CSS 根本不起作用并且在编辑器中消失了。但是，为了确定起见，请在您的 CSS 中添加这一行：

html 
{ 
     display: none !important;
}

如果您看到一个空白页面，则表示 CSS 运行良好。如果您没有发现任何区别，请尝试检查您的 html 中的链接标签（您使用了外部 CSS）。如果这不起作用，您可以非常轻松地在线部署您的 CSS 代码，只需使用该链接即可。

你为什么要使用特定的编辑器？代码的输出与编辑器无关。编辑器仅用于编辑文件，这些文件由浏览器以不同的方式编译（这就是浏览器具有不同属性兼容性的原因）。我假设你的网站是在线部署的，所以你可以去部署，下载代码并尝试在不同的编辑器中编辑，比如 VSCode（最常用的 Web 开发编辑器之一）

,

有趣的问题。听起来您使用的文本编辑器具有内置的反 XSS 功能，可以解析您的内容并删除它认为不安全的内容。如果这是对的，您如何实现目标完全受剥离过程的细节限制。听起来像 class 属性被剥离。但是，如果删除所有 属性，我会感到惊讶。我建议你做一些测试：

  • 是否保留了 id 属性？例如<p id="my-paragraph">lorem ipsum</p>
  • 是否保留了 style 属性？例如<p style="color: blue">lorem ipsum</p>
  • 是否保留了 <style /> 标签？例如<style>p { color: blue }</style><p>lorem ipsum</p>
  • 链接标签？例如<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  • 是否保留了 <script /> 标签（我非常怀疑，但不妨检查一下）？例如<script>alert('hello from script tag');</script>
  • href 中的 javascript: 协议怎么样？例如<a href="javascript:alert('hello from href')">click me</a>

根据其中任何一项是否成功，您可能有机会创建您所追求的内容类型。

基本上，他们不希望您在此框中编写脚本，通过提出这个问题，您正在破坏该意图，因此您是在进行黑客攻击。哦，这提醒我，可能不要这样做，因为 Moodle 是一个学习管理系统，这可能意味着您是一名使用学校计算机系统的学生，而任何像黑客攻击这样的远程操作都可能会给您带来麻烦。

玩得开心！！

accordionhtmljavascript