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>

更多信息请查看此处文档