/svelte-vditor-demo

Svelte框架下使用Vditor编辑器的示例

Primary LanguageJavaScriptMIT LicenseMIT

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初始化