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>

更多資訊請參考文件