大家是如何渲染 HTML 内容的?

本贴最后更新于 774 天前,其中的信息可能已经时移世异

我在开发一个应用,打算使用 Vditor 作为编辑器。我在数据表中分别存储从编辑器获取的 markdown_contenthtml_content

渲染的时候,直接从数据库中检索出 html_content 渲染到 HTML 页面中,如下。

<html><head><link rel="stylesheet" type="text/css" href="https://ld246.com/js/lib/vditor/dist/index.css"/> <script src="https://ld246.com/js/lib/vditor/dist/js/i18n/zh_CN.js"></script> <script src="https://ld246.com/js/lib/vditor/dist/method.min.js"></script></head> <body> <!-- 渲染HTML内容 --> <div class="vditor-reset" id="preview">${model.htmlContent}</div> <script> const previewElement = document.getElementById('preview') Vditor.setContentTheme('light', 'https://ld246.com/js/lib/vditor/dist/css/content-theme'); Vditor.codeRender(previewElement); Vditor.highlightRender({"enable":true,"lineNumber":false,"defaultLang":"","style":"github"}, previewElement, 'https://ld246.com/js/lib/vditor'); Vditor.mathRender(previewElement, { cdn: 'https://ld246.com/js/lib/vditor', math: {"engine":"KaTeX","inlineDigit":false,"macros":{}}, }); Vditor.mermaidRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic'); Vditor.markmapRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic'); Vditor.flowchartRender(previewElement, 'https://ld246.com/js/lib/vditor'); Vditor.graphvizRender(previewElement, 'https://ld246.com/js/lib/vditor'); Vditor.chartRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic'); Vditor.mindmapRender(previewElement, 'https://ld246.com/js/lib/vditor', 'classic'); Vditor.abcRender(previewElement, 'https://ld246.com/js/lib/vditor'); Vditor.mediaRender(previewElement); Vditor.speechRender(previewElement); </script> <script src="https://ld246.com/js/lib/vditor/dist/js/icons/ant.js"></script></body></html>

这样做会有什么弊端吗?

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    373 引用 • 1858 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • KevinBlandy
    作者

    嗯嗯,我使用的是模板引擎。那我是把 markdown 文本渲染到 HTML 中?然后再调用 Vidtor 的 api 去动态地渲染为 HTML 吗?

    1 回复
  • 其他回帖
  • KevinBlandy
    作者

    太棒啦,居然还是 go 写的!刚好我现在的应用就是 golang 开发。使用这个解析器的话,可以原汁原味地把 markdown 文本解析成编辑器中所见的样式哈? 👍

    1 回复
  • KevinBlandy
    作者

    Lute 对象,可以全局唯一吗?还是说必须每次渲染都要创建新的。

    1 回复
  • jackandrose

    image.png

    和官网的案例看起来天差地别

  • 查看全部回帖
KevinBlandy
菜鸟选手/略懂Java,Golang/CRUD开发者/Api调用工程师 海口

推荐标签 标签

  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 225 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 77 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 166 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    61 引用 • 29 回帖 • 11 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 540 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 88 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10138 引用 • 46066 回帖 • 64 关注
  • OneDrive
    2 引用 • 4 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 409 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 698 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 62 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 2 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 672 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    441 引用 • 1238 回帖 • 598 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 7 关注
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    229 引用 • 476 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 85 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 650 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 52 关注