dragon-editor

Javascript WYSIWYG editor in Nuxt!

1.5K downloads•14 stars•v3.5.16

lovefields

NPM

DragonEditor

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

This module support only Nuxt3.

Font

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

Install

npm i dragon-editor
# 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">
        <DragonEditor v-model="contentData" />
    </div>
</template>

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

Done!

View Page

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

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