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>

更多資訊請參考這裡文件