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

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

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

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

  • Vditor

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

    308 引用 • 1658 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 目前支持导出 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 回复
  • 如果可以在编辑器中编辑 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 回复
  • 感觉最后有点矛盾,开发者都提供了 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

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

请输入回帖内容 ...

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 124 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 674 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 3 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 612 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 402 关注
  • 996
    13 引用 • 200 回帖 • 8 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    108 引用 • 54 回帖
  • 学习

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

    160 引用 • 470 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 101 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    25 引用 • 215 回帖 • 161 关注
  • Bootstrap

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

    18 引用 • 33 回帖 • 683 关注
  • 锤子科技

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

    4 引用 • 31 回帖 • 5 关注
  • Spark

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

    74 引用 • 46 回帖 • 549 关注
  • Java

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

    3165 引用 • 8206 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 444 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    393 引用 • 3380 回帖 • 1 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 192 关注
  • ZooKeeper

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

    59 引用 • 29 回帖 • 17 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 254 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 316 关注
  • TextBundle

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

    1 引用 • 2 回帖 • 45 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖 • 2 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 489 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 33 关注
  • 心情

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

    59 引用 • 369 回帖
  • 酷鸟浏览器

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

    3 引用 • 59 回帖 • 21 关注