NPM

DragonEditor

我创建 DragonEditor 是因为我需要一个所见即所得编辑器来编写我的博客。

此模块仅支持 Nuxt3。

依赖项

@pinia/nuxt
highlight.js

字体

如果您使用 Codeblock，我建议使用 Inconsolata 字体。 (链接)

安装

npm i dragon-edtior
# or
yarn add dragon-editor
# or
bun add dragon-editor

使用

首先，设置模块

export default defineNuxtConfig({
    modules: ["dragon-editor"],
});

其次，使用组件

<template>
    <div class="editor-area">
        <ClientOnly>
            <DragonEditor ref="$editor" />
        </ClientOnly>
    </div>
</template>

<script setup lang="ts">
    const $editor = ref<DragonEditor>();
</script>

完成！

查看页面

<template>
    <div class="view-area">
        <DragonEditorViewer :content="data" />
    </div>
</template>

<script setup lang="ts">
    const data = ref<DEContentData>([]); // content data
</script>

更多信息请访问文档