Awesome

svelte-vditor-demo

English | 简体中文

在Svelte框架使用Vditor的demo, 源码详见 App.svelte

使用过程

• 使用Svelte官方的举例, 初始化工程

# 初始化工程
npx degit sveltejs/template my-svelte-project

# 下载依赖
npm install

• 修改public目录下的index.html的head标签, 引入Vditor的通用样式

+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css"/>

• 在组件需要的地方引入Vditor

示例: src/App.svelte

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

1. 为Vditor添加挂载DOM
2. 在onMount生命周期引入Vditor初始化