防止用户生成的内容破坏布局?

2024-01-24

我有一个包含一些用户生成的内容的网站,我希望能够将布局的标记以及用户生成的内容的标记分开,这样 u-g 内容就不会破坏网站布局。

用户生成的内容是可信的,因为它来自我网络上的已知用户组,但尽管如此,只允许一小部分 html 标签(p、ul/ol/li、em、strong 等) )。然而,用户生成的内容不能保证格式良好,并且我们遇到过一些格式错误的用户生成内容破坏网站布局的实例。

我们正在与用户合作,以​​保持内容格式良好,但与此同时,我正在尝试找到一种将内容与布局分开的好方法。我一直在研究命名空间,但无法找到有关嵌入式命名空间的 CSS 支持的良好文档。

有人有什么好主意吗?

EDIT

我在这里看到了一些非常好的建议,但我可能应该澄清一下,我绝对有no控制用户使用的输入机制。他们将内容输入一个系统,而我的页面使用该系统的 API 从中提取内容。该系统正在使用 TinyMCE,但正如我所说,我们仍然收到一些格式错误的内容。


为什么不使用 Markdown

如果您的用户懂 HTML 或可以掌握 Markdown 语法的概念,我建议您选择这样做。 Stackoverflow 与它配合得很好。我无法想象 Stackoverflow 上有一个普通的富编辑器。 Markdown 编辑器使用起来更简单、更快捷,并为大多数情况提供足够的格式化功能。如果您需要一些特殊的附加功能,您可以随时添加这些功能,但对于初学者来说,开箱即用的功能就足够了。

实时查看自我验证

但不要忘记包含用户所写内容的实时视图。自我验证创造奇迹,因此他们在发布数据之前纠正自己的错误。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

防止用户生成的内容破坏布局? 的相关文章

  • HTML/PHP 中的 POST 和 GET 有什么区别[重复]

    这个问题在这里已经有答案了 我正在编写一个 PHP 脚本 但我似乎无法真正让它工作 我正在测试基础知识 但我不太明白 GET 和 POST 意味着什么 有什么区别 我在网上看到的所有定义对我来说没有多大意义 到目前为止我编写的代码 但由于我
  • 为什么 event.stopPropagation() 不会阻止

    SO 上也提出了与此类似的问题 但他们要么只关心解决其具体实现 要么没有明确提出这个问题 此外 所有答案都没有真正解决这个问题 给出以下示例 document querySelector span addEventListener clic
  • 如何使用c#获取服务器端元素的innerhtml(内部有另一个服务器端控件)

    如何使用c 获取服务器端元素的innerhtml 内部有另一个服务器端控件 或者使用 Visual Studio 2010 设计电子邮件正文的最佳方法是什么 我有一些 C 代码用于发送电子邮件 支持 html 正文 所以我正在寻找一种逃避硬
  • 如何使用相对路径链接到另一个本地文件?

    这是一个非常基本的 html 问题 但我似乎找不到答案 我有一个本地文件位于此处 Users Me Desktop Main June foo txt 在位于 Main 目录中的 html 文档中 我可以链接到foo txt使用完整路径的文
  • Shared Web Workers 是否会在单页重新加载、链接导航中持续存在

    共享网络工作者 http www whatwg org specs web apps current work shared workers introduction旨在允许来自同一站点 来源 的多个页面共享单个 Web Worker 但是
  • 在 jQuery 中,如果我有一个开始类和结束类,我如何用 div 包装多个元素

    好的 这里有一些 html 我有一些开始和结束课程 但为此我只添加了每门课程 1 门 div span nbsp span div div span nbsp span div div class start lt start span n
  • 如何创建具有动态数量的网格列的 TailwindCSS 网格?

    我正在使用 Vue3 和 TailwindCSS 并希望创建一个具有动态的网格grid cols n 班级 我知道 TailwindCSS 默认情况下最多支持 12 列 但我无法自定义主题 因为列的数量完全是动态的 给出以下纯 HTML J
  • 具有多种类型属性的 HTML5 输入

    我们的表单软件输出所有带有 type text 的元素 但我宁愿利用 HTML5 中的新类型 例如 电子邮件 数字 等 我可以在最后添加这些 但最终会得到多个类型属性 例如
  • iframe 内 Web 元素的 QuerySelector

    编辑 新标题 我正在寻找的是 iframe 内元素的 document querySelector 我已经用谷歌搜索了很多答案 最后我被难住了 我正在尝试在 iframe 内查询 我正在构建要在 Selenium 中使用的字符串选择器 通常
  • 如何将内容放在article.js之上/之上

    So I am trying to create a navigation and footer in the body of the website but the particle js keeps coming over those
  • 如何在Shiny中默认选择verbatimTextOutput中的文本?

    这是与我之前的问题相关的问题 是否可以有固定宽度的 verbatimTextOutput 并让文本在 Shiny 中换行 https stackoverflow com q 58516071 7669809 我有以下闪亮的应用程序 http
  • 如果用户登录,则更改引导程序中的导航栏

    我有一个标准菜单 包括 登录 和 创建用户 的选项 我想要的是 当您创建用户或登录整个导航栏菜单来更改 例如 我的用户页面 和 注销 时 我该怎么做 div div
  • 联系表 7 中的占位符 - Wordpress

    我正在为我的客户制作一个网站 但遇到了问题 我使用Contact Form 7在wordpress中制作了一个联系表单 这个插件确实很容易使用 但是当我想使用插件的占位符属性时 它在加载页面时没有显示占位符 这就是我在联系表 7 中设置占位
  • 超大图像缩小后变得模糊

    这是我第一次尝试响应式设计 所以如果这是一个愚蠢的简单问题 请原谅 我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度 因为我知道放大图像会导致模糊不清 我有点困惑的是 当我缩小窗口并且图像开始缩小时 它也变得模糊 这是正确的行为吗
  • 控制 HTML 中的图像加载顺序

    有没有办法控制网页上图像的加载顺序 我正在考虑尝试通过首先加载轻量级 加载 图形来模拟预加载器 有任何想法吗 Thanks 使用 Javascript 并填充图像src属性稍后 这 告诉浏览器链接到页面上的 URL 因此不会向服务器发送请求
  • 从 onclick 属性调用 e.stopImmediatePropagation()

    如何从事件对象中获取事件对象onclick属性 我努力了 a href something html Click me a 另外 我也尝试过这个 a href something html Click me a 但控制台只显示 a 元素 我
  • 高度在 IOS (iphone) 上无法正常工作

    我已经创建了this https codepen io salman15 project live DWbWpo Codepen 上的网站 在尝试使其响应所有平台时 我遇到了问题 看起来单个 div 覆盖了整个页面 仅在 IOS 上 并且并
  • 辅助功能:在密码输入中显示/隐藏密码按钮

    密码输入具有显示 隐藏按钮是很常见的 但我在网上发现很少有关于与其相关的可访问性问题的内容 我是否应该将任何类型的 ARIA 属性附加到按钮或密码输入 是一个复选框还是一个触发JS的按钮也能达到很好的效果 不知道我应该注意什么 作为一个不太
  • 单击按钮滚动到特定 div

    我有一个具有固定菜单和内容框 div 的页面 单击菜单时 内容框滚动到特定 div 到目前为止 一切都很好 这是这里的示例 https jsfiddle net ezrinn 8cdjsmb9 11 https jsfiddle net e
  • 如何使用 facebook 用户登录我的网站?

    我想知道 facebook 如何让用户登录我们的网站 我的意思是用户需要注册到我的网站才能发表评论 我如何通过我的 php 代码检查它是否是登录用户 我听说你只能用javascript检查它是否是登录用户 感谢您的任何解释 您可以使用脸书

随机推荐

  • nginx 中使用 proxy_pass 出现“请求标头或 Cookie 太大”

    我的服务器 A 上有以下 nginx 设置 面向互联网 仅相关部分 upstream new api server unix home ubuntu new api shared tmp sockets puma sock server l
  • 如何隐藏div元素下方的文本光标

    我是 CSS 和 javascript 新手 我有一个搜索文本框 可以在其中添加任何搜索值 输入错误值后 会弹出一个 div 并显示 未找到记录 带有关闭按钮来关闭 div 当我将光标放在文本框上而不关闭弹出窗口后 我的光标显示在 div
  • @end 在实现上下文中丢失[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我没有足够
  • Android:使用隐式意图读取txt文件

    问题 我正在尝试使用隐式打开 txt 文件Intent ACTION GET CONTENT 并将文本文件内容存储到数组列表中 当我尝试使用 Uri 的文件路径打开文件时getPath 并创建一个BufferedReader对象从文本文件中
  • 遗留文件的 QVariantList 序列化

    我正在以旧的遗留文件格式 不是我们的 阅读 很明显 这种文件格式是使用序列化编写的 因此为了让我的生活更轻松 我在阅读时也做了同样的事情 在读取文件的某个时刻 一个段被识别为QMetaType QVariantList https doc
  • Gradle 同步失败:无法创建父目录 - Android Studio

    我在 Android Studio 中遇到意外错误 无法运行我的应用程序 C Users gradle caches modules 2 metadata 2 71 descriptors com android tools build g
  • 用于检查素数的 C++ 代码不起作用

    我在使用此 C 代码时遇到问题 整数num是一个我想检查它是否是质数的数字 然而这个程序总是返回 false 这可能很简单 但我找不到任何东西 for int i 2 i
  • 如何将用户添加到 sfguard

    我在用着symfony http www symfony project net1 2 与sfguard 1 4 1 http www symfony project org plugins sfGuardPlugin 在系统上注册新用户的
  • 无法获取 Kerberos 领域

    我是 Kerberos hive 的新手 想要使用 JDBC 连接 hive Kerberos 实现 gt gt org apache hadoop conf Configuration conf new gt gt org apache
  • 为什么使用keys()而不是%{..}会发生自动生存?

    这是我发现的一个微妙之处keys perl e use warnings use strict my d ab gt 1 my e keys d gt cd perl e use warnings use strict my d ab gt
  • Vue.js 如何计算总数?

    如何计算数组中的总金额 我将数据作为 prop 传递给子组件 但我被困在这里 当我控制台 log prop 时 它返回一个非常复杂的对象 我试过this values reduce 功能 但不起作用
  • Django项目重组:无法导入应用程序

    我正在尝试重组我的项目 以符合最新的 Two Scoops of Django 一书 针对 Django 1 11 中的建议 完成重组后 我的应用程序无法导入 secureDash project README rst config ini
  • “未知命令syncdb”运行“python manage.pysyncdb”

    我想创建一个名为 database1 sqlite 的数据库的表 因此我运行以下命令 python 管理 py 同步数据库 但是当我执行命令时 我收到以下错误 未知命令 syncdb 输入 manage py help 以了解用法 但当我跑
  • 在 android 4.4 中,将应用程序从最近的任务中删除会永久终止应用程序及其服务。知道为什么吗?

    与以前的版本不同 在 4 4 中 将应用程序从最近的任务中删除会永久杀死应用程序及其服务 如强制停止 即使它正在运行后台服务 它显示 0 个进程 1 个服务 但服务也不起作用 理想情况下 它不应该终止后台服务 并且在 4 3 之前的版本中也
  • System.InvalidCastException - 在调试中有效,在发布时失败

    UNHANDLED EXCEPTION System InvalidCastException Cannot cast from source type to destination type 06 11 19 39 01 690 I Mo
  • 如何在 CarPlay 模拟器上测试 iOS 应用程序

    我正在尝试开发一个与 CarPlay 兼容的 iOS 应用程序 根据这篇文章iOS CarPlay API 是公开的吗 如何集成CarPlay https stackoverflow com questions 22372095 is io
  • Android 中缩小(或裁剪)对话框背景

    我有一个高分辨率图像 假设为 1900x1200 我想将其用作对话框的背景 它被创建了 Dialog dialog new Dialog this dialog setContentView R layout dialog 对话框布局
  • 始终在 UWP 中的 FlipView 控件上显示导航箭头

    使用鼠标并将鼠标悬停在通用 Windows 平台 UWP 上时FlipView控制显示上一个 下一个导航按钮 然而 当使用触摸或笔时 它们仍然隐藏 这可能会让用户感到困惑 不期待额外的内容 我希望导航按钮始终可见 我怎样才能做到这一点 我们
  • 将第二个全局管理员添加到 Azure AD B2C?

    如何为 Azure AD B2C 添加第二个全局管理员 我们是否将它们添加为访客帐户并分配该访客 GA 添加普通用户时 它说我们无法添加 dot state fl us 电子邮件 我们应该授权它 还是会搞砸我们的主要租户 Azure AD
  • 防止用户生成的内容破坏布局?

    我有一个包含一些用户生成的内容的网站 我希望能够将布局的标记以及用户生成的内容的标记分开 这样 u g 内容就不会破坏网站布局 用户生成的内容是可信的 因为它来自我网络上的已知用户组 但尽管如此 只允许一小部分 html 标签 p ul o