dragon-editor

DragonEditor

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

This module support only Nuxt.

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>([]); // Do not modify the value after binding under any circumstances.
</script>

Done!

View Page

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

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

More information in Document

Sponsors

Support this project by becoming a sponsor. GitHub Sponsors