-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
41f99e5
commit 3dc0db0
Showing
9 changed files
with
265 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,11 +9,5 @@ bun install --frozen-lockfile | |
| ### Dev | ||
|
|
||
| ``` | ||
| bun run preview | ||
| ``` | ||
|
|
||
| ### build | ||
|
|
||
| ``` | ||
| bun run generate | ||
| bun run dev | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,67 @@ | ||
| <template> | ||
| <div class="section intro-page"> | ||
| <h1 class="page-title">Intro</h1> | ||
| <p class="text">Dragon Editor is</p> | ||
| <h1>Intro</h1> | ||
|
|
||
| <p> | ||
| Dragon Editor made it just because I needed the WYSIWYG Editor to write on my <NuxtLink to="https://dico.me" target="_blank">blog</NuxtLink>.<br /> | ||
| This module support only Nuxt3. | ||
| </p> | ||
|
|
||
| <h2>Dependencies</h2> | ||
|
|
||
| <ul class="list"> | ||
| <li><NuxtLink to="https://nuxt.com/modules/pinia" target="_blank">@pinia/nuxt</NuxtLink></li> | ||
| </ul> | ||
|
|
||
| <h2>Installation</h2> | ||
|
|
||
| <p>Install using the package manager you use.</p> | ||
|
|
||
| <pre><code>// npm | ||
| npm install dragon-editor | ||
|
|
||
| // yarn | ||
| yarn add dragon-editor | ||
|
|
||
| // bun | ||
| bun add dragon-editor</code></pre> | ||
|
|
||
| <p>If you complate install then set <code>nuxt.config.ts</code></p> | ||
|
|
||
| <pre><code><span class="keyword">export</span> <span class="keyword">default</span> <span class="title --function">defineNuxtConfig</span>({ | ||
| <span class="attr">modules</span>: [<span class="string">"dragon-editor"</span>], | ||
| });</code></pre> | ||
|
|
||
| <h2>How to use?</h2> | ||
|
|
||
| <h3>Edite Page</h3> | ||
|
|
||
| <p>You must use <code><ClientOnly></code> component.</p> | ||
|
|
||
| <pre><code><span class="tag"><<span class="name">template</span>></span> | ||
| <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"editor-area"</span>></span> | ||
| <span class="tag"><<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="keyword">DragonEditor</span> <span class="attr">ref</span>=<span class="string">"$editor"</span> /></span> | ||
| <span class="tag"></<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"></<span class="name">div</span>></span> | ||
| <span class="tag"></<span class="name">template</span>></span> | ||
|
|
||
| <span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"> | ||
| <span class="keyword">const</span> $editor = <span class="symbol">ref</span><<span class="keyword">DragonEditor</span>>(); | ||
| </span><span class="tag"></<span class="name">script</span>></span></code></pre> | ||
|
|
||
| <h3>View Page</h3> | ||
|
|
||
| <pre><code><span class="tag"><<span class="name">template</span>></span> | ||
| <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"view-area"</span>></span> | ||
| <span class="tag"><<span class="keyword">DragonEditorViewer</span> <span class="attr">:content</span>=<span class="string">"data"</span> /></span> | ||
| <span class="tag"></<span class="name">div</span>></span> | ||
| <span class="tag"></<span class="name">template</span>></span> | ||
|
|
||
| <span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"> | ||
| <span class="keyword">const</span> data = <span class="symbol">ref</span><<span class="keyword">DEContentData</span>>([]); <span class="comment">// content data</span> | ||
| </span><span class="tag"></<span class="name">script</span>></span></code></pre> | ||
|
|
||
| <p><NuxtLink to="/method">See Method</NuxtLink></p> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| <template> | ||
| <div class="section method-page"> | ||
| <h1>Method</h1> | ||
|
|
||
| <h2>getContentData</h2> | ||
|
|
||
| <p>This method return Editor content data.</p> | ||
|
|
||
| <pre><code><span class="tag"><<span class="name">template</span>></span> | ||
| <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"editor-area"</span>></span> | ||
| <span class="tag"><<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="keyword">DragonEditor</span> <span class="attr">ref</span>=<span class="string">"$editor"</span> /></span> | ||
| <span class="tag"></<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"<span class="symbol">getData</span>()"</span>></span>Get Data<span class="tag"></<span class="name">button</span>></span> | ||
| <span class="tag"></<span class="name">div</span>></span> | ||
| <span class="tag"></<span class="name">template</span>></span> | ||
|
|
||
| <span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"> | ||
| <span class="keyword">const</span> $editor = <span class="symbol">ref</span><<span class="keyword">DragonEditor</span>>(); | ||
|
|
||
| <span class="keyword">function</span> <span class="title --function">getData</span>(<span class="params"></span>) { | ||
| <span class="variable --language">console</span>.<span class="title --function">log</span>($editor.<span class="property">value</span>.<span class="title --function">getContentData</span>()); <span class="comment">// return content data (DEContentData type)</span> | ||
| } | ||
| </span><span class="tag"></<span class="name">script</span>></span></code></pre> | ||
|
|
||
| <h2>setContentData</h2> | ||
|
|
||
| <p>This method change Editor content data.</p> | ||
|
|
||
| <pre><code><span class="tag"><<span class="name">template</span>></span> | ||
| <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"editor-area"</span>></span> | ||
| <span class="tag"><<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="keyword">DragonEditor</span> <span class="attr">ref</span>=<span class="string">"$editor"</span> /></span> | ||
| <span class="tag"></<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="name">button</span> @<span class="attr">click</span>=<span class="string">"<span class="symbol">setData</span>()"</span>></span>Get Data<span class="tag"></<span class="name">button</span>></span> | ||
| <span class="tag"></<span class="name">div</span>></span> | ||
| <span class="tag"></<span class="name">template</span>></span> | ||
|
|
||
| <span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"> | ||
| <span class="keyword">const</span> $editor = <span class="symbol">ref</span><<span class="keyword">DragonEditor</span>>(); | ||
|
|
||
| <span class="keyword">function</span> <span class="title --function">setData</span>(<span class="params"></span>) { | ||
| $editor.<span class="property">value</span>.<span class="title --function">setContentData</span>([...]); <span class="comment">// use DEContentData type value</span> | ||
| } | ||
| </span><span class="tag"></<span class="name">script</span>></span></code></pre> | ||
|
|
||
| <h2>setDecoration</h2> | ||
|
|
||
| <p>This method set text node style.</p> | ||
|
|
||
| <h2>setTextAlign</h2> | ||
|
|
||
| <p>This method set align style in editable element.</p> | ||
|
|
||
| <h2>addBlock</h2> | ||
|
|
||
| <p>This method adds blocks supported by the editor to the editor.</p> | ||
|
|
||
| <h2>addImageBlock</h2> | ||
|
|
||
| <p>This method add image block to the editor.</p> | ||
|
|
||
| <pre><code>$editor.<span class="property">value</span>.<span class="title --function">addImageBlock</span>({ | ||
| <span class="attr">src</span>: <span class="built-in">string</span>; | ||
| <span class="attr">width</span>: <span class="built-in">number</span>; | ||
| <span class="attr">height</span>: <span class="built-in">number</span>; | ||
| <span class="attr">classList</span>?: <span class="built-in">string</span>[]; | ||
| <span class="attr">caption</span>?: <span class="built-in">string</span>; | ||
| });</code></pre> | ||
|
|
||
| <h2>addCustomBlock</h2> | ||
|
|
||
| <p>This method add custom block to the editor.</p> | ||
|
|
||
| <pre><code>$editor.<span class="property">value</span>.<span class="title --function">addCustomBlock</span>(<span class="attr">HTML</span>: <span class="built-in">string</span>, <span class="attr">classList</span>: <span class="built-in">string</span>[] = []);</code></pre> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <template> | ||
| <div class="section option-page"> | ||
| <h1>Option</h1> | ||
|
|
||
| <h2>useMenuBar</h2> | ||
|
|
||
| <p> | ||
| If you didn't want use default menu bar. You can set <code>useMenuBar</code> option.<br /> | ||
| Default value is <code>true</code> | ||
| </p> | ||
|
|
||
| <pre><code><span class="tag"><<span class="name">template</span>></span> | ||
| <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"editor-area"</span>></span> | ||
| <span class="tag"><<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"><<span class="keyword">DragonEditor</span> <span class="attr">:useMenuBar</span>="<span class="string">false</span>" <span class="attr">ref</span>=<span class="string">"$editor"</span> /></span> | ||
| <span class="tag"></<span class="keyword">ClientOnly</span>></span> | ||
| <span class="tag"></<span class="name">div</span>></span> | ||
| <span class="tag"></<span class="name">template</span>></span> | ||
|
|
||
| <span class="tag"><<span class="name">script</span> <span class="attr">setup</span> <span class="attr">lang</span>=<span class="string">"ts"</span>></span><span class="language-javascript"> | ||
| <span class="keyword">const</span> $editor = <span class="symbol">ref</span><<span class="keyword">DragonEditor</span>>(); | ||
| </span><span class="tag"></<span class="name">script</span>></span></code></pre> | ||
| </div> | ||
| </template> |