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

This Module Has Dependencies Next List:

• highlight.js
• @pinia/nuxt
• @vueuse/nuxt

You Must Add All Dependencies To Your Project.

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

# If You don't have these dependencies
npm i dragon-editor highlight.js @pinia/nuxt @vueuse/nuxt
# or
yarn add dragon-editor highlight.js @pinia/nuxt @vueuse/nuxt
# or
bun add dragon-editor highlight.js @pinia/nuxt @vueuse/nux

How to Use

Config

export default defineNuxtConfig({
    modules: [
        "dragon-editor",
        // or
        [
            "dragon-editor",
            {
                componentNameList: ["MyComponent"], // If you use specific component, Set component name
            },
        ],
    ],

    vite: {
        optimizeDeps: {
            include: ["highlight.js/lib/*"], // highlight module Optimize
        },
    },
});

Edit Page

<template>
    <div class="editor-area">
        <DragonEditor v-model="contentData" />
    </div>
</template>

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

View Page

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

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

Link

• Document
• Demo

Sponsors

Support this project by becoming a sponsor. GitHub Sponsors