NPM

DragonEditor

我创建 DragonEditor 是因为我需要 WYSIWYG 编辑器来写我的博客。

此模块仅支持 Nuxt3。

依赖项

@pinia/nuxt
highlight.js

字体

如果你使用代码块，我推荐使用 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>

更多信息请查看文档