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

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

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

  • Vditor

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

    86 引用 • 704 回帖 • 7 关注

赞助商 我要投放

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Vanessa

    目前支持导出 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

    如果可以在编辑器中编辑 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

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

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