Dragon Editor is
+
+ Dragon Editor made it just because I needed the WYSIWYG Editor to write on my
+ This module support only Nuxt3.
+
Install using the package manager you use.
+ +// npm
+npm install dragon-editor
+
+// yarn
+yarn add dragon-editor
+
+// bun
+bun add dragon-editorIf you complate install then set nuxt.config.ts
export default defineNuxtConfig({
+ modules: ["dragon-editor"],
+});You must use <ClientOnly> component.
<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>This method return Editor content data.
+ +<template>
+ <div class="editor-area">
+ <ClientOnly>
+ <DragonEditor ref="$editor" />
+ </ClientOnly>
+ <button @click="getData()">Get Data</button>
+ </div>
+</template>
+
+<script setup lang="ts">
+ const $editor = ref<DragonEditor>();
+
+ function getData() {
+ console.log($editor.value.getContentData()); // return content data (DEContentData type)
+ }
+</script>This method change Editor content data.
+ +<template>
+ <div class="editor-area">
+ <ClientOnly>
+ <DragonEditor ref="$editor" />
+ </ClientOnly>
+ <button @click="setData()">Get Data</button>
+ </div>
+</template>
+
+<script setup lang="ts">
+ const $editor = ref<DragonEditor>();
+
+ function setData() {
+ $editor.value.setContentData([...]); // use DEContentData type value
+ }
+</script>This method set text node style.
+ +This method set align style in editable element.
+ +This method adds blocks supported by the editor to the editor.
+ +This method add image block to the editor.
+ +$editor.value.addImageBlock({
+ src: string;
+ width: number;
+ height: number;
+ classList?: string[];
+ caption?: string;
+});This method add custom block to the editor.
+ +$editor.value.addCustomBlock(HTML: string, classList: string[] = []);
+ If you didn't want use default menu bar. You can set useMenuBar option.
+ Default value is true
+
<template>
+ <div class="editor-area">
+ <ClientOnly>
+ <DragonEditor :useMenuBar="false" ref="$editor" />
+ </ClientOnly>
+ </div>
+</template>
+
+<script setup lang="ts">
+ const $editor = ref<DragonEditor>();
+</script>