登录 注册

Vditor 支持 juice 注入 css 支持不同模版样式的导出

本贴最后更新于 1663 天前，其中的信息可能已经事过景迁

希望 Vditor 支持 juice 注入 css 支持不同模版样式的导出

Vditor 对外提供静态 juice 注入方法，支持用户使用 Vditor 自定义 导出排版样式，这个功能大神在做么？

  • Vditor

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

    351 引用 • 1813 回帖
北京 位置
1 关注
9 回帖
4
3
2
2.1k 63 431 316 456 32 8 87 645

相关帖子

9 回帖
Vditor 支持 juice 注入 css 支持不同模版样式的导出

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Vanessa •
    订阅者 付费者 MOD

    目前支持导出 html，有 3 套主题可选，用户自定义的话暂时只能通过外链 CSS 进行 reset。

    1 回复
  • cbam •
    作者

    嗯呢 ，因为我看了下代码，完全可以开放给用户指定远程 css 文件名，并在 toolbar 的配置中指定 css uri 以及主题名字，这样的话基本全覆盖 mdnice 的功能了。但是现在常量 CONTENT_THEME 限定死了。

    export const setContentTheme = (contentTheme: string,
                                cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`) => {
    if (!Constants.CONTENT_THEME.includes(contentTheme)) {
        return;
    }
    const vditorContentTheme = document.getElementById("vditorContentTheme") as HTMLLinkElement;
    const href = `${cdn}/dist/css/content-theme/${contentTheme}.css`;
    if (contentTheme === "light") {
        if (vditorContentTheme) {
            vditorContentTheme.remove();
        }
        return;
    }
    if (!vditorContentTheme) {
        addStyle(href, "vditorContentTheme");
    } else if (vditorContentTheme.href !== href) {
        vditorContentTheme.remove();
        addStyle(href, "vditorContentTheme");
    }
    1 回复
  • Vanessa •
    订阅者 付费者 MOD

    如果可以在编辑器中编辑 CSS ，然后导出的时将 css 和 html 导出会不会更好？

    1 回复
  • cbam •
    作者

    我调研过 mdnice 的实现： 在导出时，将不同主题的一堆 css，通过 juice 注入 html 标签，然后导出 html， 这样的好处是，导出的 html 中 css 样式无外链。

    你说在编辑器中 作者自己写 css，感觉用户知道的太底层了， 应该让写作用户知道的知识是： 我们有 N 中主题可选。 对于使用 vditor 编辑器的开发者需要知道的知识是：vditor 提供了我新增主题的能力，以更好的满足写作用户。

    而 vditor 对 开发者 提供的这种新增主题的能力，是不是可以像下面这样：

    vditor.setTheme("my.css的文件内容 || my.css的外链" as var X)

而 vditor底层呢？
if (X.startWith("http")) {
	X = wget http://my.css
}
juice.inline(X, contentHtml);
最终开发者 vditor.getRenderedContentHtml() 获得这种无外链的代码片段
    1 回复
  • Vanessa •
    订阅者 付费者 MOD

    感觉最后有点矛盾，开发者都提供了 css 文件，最终获取的也可以用外链 CSS，不需要关注是否有外链了。

    现在的问题是，大部分开发者还要弄外链会比较麻烦，而且不方便调试，如果可以直接在界面中编辑 CSS 可能会更友好。

    1 回复
  • nil1 • • 1 评论

    内联 CSS 是为了解决微信公众号、电子邮件这种不支持引用外部 CSS 的场合

    已支持一键复制到公众号。电子邮件的话用 Vditor 排版可能不太合适。
    Vanessa •
  • nil1 • • 1 评论

    支持复制到公众号？指的是 https://github.com/nicejade/markdown-online-editor 项目吗

    这个项目不支持公式、思维导图等内容

    不是，是 vditor 本身就支持。
    Vanessa •
  • nil1 •

    https://ld246.com/guide/markdown demo 例子上没看到啊，哪里可以测试呢。

  • nil1 •

    支持公式跟思维导图复制到公众号吗？

请输入回帖内容 ...
cbam
北京
回帖
60
 帖子
37
 积分
250

近期热议

推荐标签 标签

  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”，乌云众测平台认证的“安全云”，为移动时代的创业者提供新一代的 CDN 加速服务。

    21 引用 • 37 回帖 • 545 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • API

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

    77 引用 • 430 回帖 • 2 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1387 回帖 • 283 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    90 引用 • 899 回帖
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 325 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 432 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 786 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台，它支持多种框架、语言、运行时环境、云平台及应用服务，使开发人员能够在几秒钟内进行应用程序的部署和扩展，无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 624 关注
  • 创业

    你比 99% 的人都优秀么？

    84 引用 • 1399 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时，提供更无缝的用户体验。

    1 引用 • 2 回帖 • 47 关注

最新标签