在 Svelte 中使用 Vditor

关于 Svelte

Svelte 自诩为一个 compiler,构建出来之后有一个 bundle.js 和一个 bundle.css,并没有提供模板文件。手动添加静态文件挂载的话,需要自己引入这两个 bundle。

完整的 demo 仓库参考 HerbertHe/svelte-vditor-demo: Svelte 框架下使用 Vditor 编辑器的示例

使用方法

  1. 首先需要在 index.html 引入 vditor 的全局样式文件
    + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css"/>
    
  2. 然后再在所需要使用的组件处初始化 Vditor 实例
    <script>
        import { onMount } from "svelte"
        import Vditor from "vditor"
    
        onMount(() => {
            const vditor = new Vditor("vditor-container", {
                theme: "classic",
                minHeight: 600,
            })
        })
    </script>
    
    <div id="vditor-container" />
    
    <style>
    </style>
    
    

这样在 Svelte 中使用 Vditor 就完成了~

Vditor 样式定制

因为需要深度定制 Vditor 样式,便自己开了个仓库做了这件事,目前有三个可选主题(如果有什么问题,或者喜欢的样式的话 issue,觉得还不错的话欢迎 Star)

仓库地址: HerbertHe/vditor-theme: vditor 适配样式开发

样式预览:https://herberthe.github.io/vditor-theme

  • Svelte
    1 引用
  • Vditor

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

    145 引用 • 971 回帖

广告 我要投放

欢迎来到这里!

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

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