docs(ngx-jodit): improved demo page

julianpoemp · Jan 12, 2024 · 694ea48 · 694ea48
1 parent 5125634
commit 694ea48
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 891 deletions.
diff --git a/README.md b/README.md
@@ -1,14 +1,14 @@
-# Mono-repository for ngx-jodit & ngx-jodit-pro
+# ngx-jodit & ngx-jodit-pro
 
-If you want to use Jodit (free) you need to install ngx-jodit and for Jodit (Pro/Multi/OEM) you need to install ngx-jodit-pro. See the compatibility tables below for more information.
+Angular wrapper for jodit and jodit-pro WYSIWYG editor supporting Angular >=12 and ESM.
 
 ## About this repository
 
 There is no affiliation with Jodit. ngx-jodit and ngx-jodit-pro are under MIT-License. Jodit and Jodit-Pro can be under another license. For more information about licenses click on "more Information" next to a version of your choice. and scroll down to "License".
 
 ## ngx-jodit</h1>
 
-Angular wrapper for <a href="https://github.com/xdan/jodit">Jodit</a> WYSIWYG editor.
+Angular wrapper for <a href="https://github.com/xdan/jodit">Jodit</a> WYSIWYG editor (free). If you want to use Jodit Pro/Multi/OEM see ngx-jodit-pro below.
 
 ### Compatibility table
 

diff --git a/apps/demo/src/app/app.component.html b/apps/demo/src/app/app.component.html
@@ -1,30 +1,43 @@
-<div class="position-absolute mt-3 me-3" style="top: 0; right: 0">
-  <a href="https://github.com/julianpoemp/ngx-jodit"
-    ><i class="bi bi-github" style="font-size: 1.5rem"></i
-  ></a>
-</div>
-<h1>
-  ngx-jodit 3.x <a href="https://www.npmjs.com/package/ngx-jodit"><img alt="npm"
-                                                                       src="https://img.shields.io/npm/v/ngx-jodit"></a>
-</h1>
-<p>
-  Angular wrapper for <a href="https://github.com/xdan/jodit">Jodit</a> WYSIWYG
-  editor. It supports Angular >= 16. Fore more information about installation,
-  use, options and events see <a href="https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit/README.md">Github
-  README</a>.
-</p>
+<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+  <a href="/" class="d-flex align-items-center mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
+    <span class="fs-4 ms-3">ngx-jodit v3</span> <a href="https://www.npmjs.com/package/ngx-jodit"
+                                                   class="ms-2 nav-link me-3">
+    <img alt="npm" src="https://img.shields.io/npm/v/ngx-jodit">
+  </a>
+  </a>
 
-<ngx-jodit [(value)]="value" [options]="options" #ngxJodit></ngx-jodit>
-<h2>Options</h2>
-<p>
-  All
-  <a href="https://xdsoft.net/jodit/docs/classes/config.Config.html">options</a>
-  from Jodit are supported. <b>Plugins are not supported in this demo because you have to import it in your Typescript
-  code (<a href="https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit/README.md">more information</a>).</b>
-  The options are set via two-way data-binding. Insert
-  your options as JSON to test it.
-</p>
-<p>
-  For example you can insert <code>&#123;"disabled": true}</code>
-</p>
-<textarea [(ngModel)]="optionsStr" name="options"></textarea>
+  <ul class="nav nav-pills">
+    <li class="nav-item"><a href="https://github.julianpoemp.com/ngx-jodit/3.x/" class="nav-link active"
+                            aria-current="page">v3</a></li>
+    <li class="nav-item"><a href="https://github.julianpoemp.com/ngx-jodit/2.x/" class="nav-link">v2</a></li>
+    <li class="nav-item"><a href="https://github.julianpoemp.com/ngx-jodit/1.x/" class="nav-link">v1</a></li>
+    <li class="nav-item"><a href="https://github.com/julianpoemp/ngx-jodit" class="nav-link"><i class="bi bi-github"
+                                                                                                style="font-size: 1.5rem"></i></a>
+    </li>
+  </ul>
+</header>
+
+<main class="p-3 p-md-5 py-md-3">
+  <p>
+    Angular wrapper for <a href="https://github.com/xdan/jodit">Jodit</a> WYSIWYG
+    editor. It supports Angular >= 16. Fore more information about installation,
+    use, options and events see <a href="https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit/README.md">Github
+    README</a>.
+  </p>
+
+  <ngx-jodit [(value)]="value" [options]="options" #ngxJodit></ngx-jodit>
+  <h3 class="pt-3">Options</h3>
+  <p>
+    All
+    <a href="https://xdsoft.net/jodit/docs/classes/config.Config.html">options</a>
+    from Jodit are supported. <b>Plugins are not supported in this demo because you have to import it in your Typescript
+    code (<a href="https://github.com/julianpoemp/ngx-jodit/blob/main/libs/ngx-jodit/README.md">more
+      information</a>).</b>
+    The options are set via two-way data-binding. Insert
+    your options as JSON to test it.
+  </p>
+  <p>
+    For example you can insert <code>&#123;"disabled": true}</code>
+  </p>
+  <textarea [(ngModel)]="optionsStr" name="options"></textarea>
+</main>
diff --git a/apps/demo/src/app/app.module.ts b/apps/demo/src/app/app.module.ts
@@ -1,13 +1,12 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 
-import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
-import { NgxJoditComponent } from 'ngx-jodit';
-import { FormsModule } from '@angular/forms';
+import {AppComponent} from './app.component';
+import {NgxJoditComponent} from 'ngx-jodit';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
-  declarations: [AppComponent, NxWelcomeComponent],
+  declarations: [AppComponent],
   imports: [BrowserModule, NgxJoditComponent, FormsModule],
   providers: [],
   bootstrap: [AppComponent],