在 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）

• vscode-dark
• vscode-light
• dracula

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

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