NPM

DragonEditor

私はブログを書くためにWYSIWYGエディターが必要になったので、DragonEditorを作成しました。

このモジュールは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>

詳細情報はドキュメントをご覧ください。