NPM

DragonEditor

I just made the DragonEditor because I needed the WYSIWYG Editor to write on my blog.

This module support only Nuxt3.

Dependencies

@pinia/nuxt
highlight.js

Font

If you use Codeblock. I recommented use Inconsolata font. (link)

Install

npm i dragon-edtior
# or
yarn add dragon-editor
# or
bun add dragon-editor

Using

First. Set module

export default defineNuxtConfig({
    modules: ["dragon-editor"],
});

Second. Use Component

<template>
    <div class="editor-area">
        <ClientOnly>
            <DragonEditor ref="$editor" />
        </ClientOnly>
    </div>
</template>

<script setup lang="ts">
    const $editor = ref<DragonEditor>();
</script>

Done!

View Page

<template>
    <div class="view-area">
        <DragonEditorViewer :content="data" />
    </div>
</template>

<script setup lang="ts">
    const data = ref<DEContentData>([]); // content data
</script>