登录 注册

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

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

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

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

  • Vditor

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

    366 引用 • 1842 回帖 • 2 关注
北京 位置
1 关注
9 回帖
4
3
2
2.2k 63 431 372 468 32 8 90 710

相关帖子

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

欢迎来到这里！

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

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

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

    1 回复
  • cbam • via macOS
    作者

    嗯呢 ，因为我看了下代码，完全可以开放给用户指定远程 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 • via macOS
    订阅者 付费者 MOD

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

    1 回复
  • cbam • via macOS
    作者

    我调研过 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 • via macOS
    订阅者 付费者 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

近期热议

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    5 引用 • 16 回帖 • 3 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 208 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖
  • Word
    13 引用 • 40 回帖
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • Java

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

    3195 引用 • 8215 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    34 引用 • 467 回帖 • 759 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖 • 1 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 176 关注
  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    36 引用 • 155 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点；但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中，从而不再需要读写 HDFS，因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 566 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 757 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 6 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 250 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 229 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    159 引用 • 306 回帖
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 1 关注
  • OpenCV
    15 引用 • 36 回帖
  • golang

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

    498 引用 • 1395 回帖 • 254 关注
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 640 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 704 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 344 关注

最新标签