Added full examples in getting-started.md

xdan · Feb 2, 2025 · 38aa3d0 · 38aa3d0
1 parent df8413a
commit 38aa3d0
Showing 1 changed file with 91 additions and 9 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -1,38 +1,50 @@
 # Getting Started
 
-via npm
+## via npm
 
 ```shell
 npm install jodit
 ```
 
-via yarn
+## via yarn
 
 ```shell
 yarn add jodit
 ```
 
-cdnjs
+## CDN
+
+### jsdelivr
 
 ```html
 <link
 	rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.3.1/es2021/jodit.min.css"
+	href="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.css"
 />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.3.1/es2021/jodit.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.js"></script>
 ```
 
-unpkg
+### unpkg
 
 ```html
 <link
 	rel="stylesheet"
-	href="https://unpkg.com/jodit@4.3.1/es2021/jodit.min.css"
+	href="https://unpkg.com/jodit@latest/es2021/jodit.min.css"
 />
-<script src="https://unpkg.com/jodit@4.3.1/es2021/jodit.min.js"></script>
+<script src="https://unpkg.com/jodit@latest/es2021/jodit.min.js"></script>
 ```
 
-Usage
+### cdnjs
+
+```html
+<link
+	rel="stylesheet"
+	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.47/es2021/jodit.min.css"
+/>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.2.47/es2021/jodit.min.js"></script>
+```
+
+## Usage
 
 ```html
 <textarea id="editor"></textarea>
@@ -42,3 +54,73 @@ Usage
 	});
 </script>
 ```
+
+## Full example
+
+You can use the following code to create a simple HTML page with Jodit Editor.
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			name="viewport"
+			content="width=device-width, height=device-height, initial-scale=1.0,
+            maximum-scale=1.0"
+		/>
+		<link
+			href="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.css"
+			rel="stylesheet"
+			type="text/css"
+		/>
+	</head>
+	<body>
+		<div id="jodit-editor"></div>
+		<script
+			type="text/javascript"
+			src="https://cdn.jsdelivr.net/npm/jodit@latest/es2021/jodit.fat.min.js"
+		></script>
+		<script>
+			Jodit.make('#jodit-editor');
+		</script>
+	</body>
+</html>
+```
+
+## Full example PRO version
+
+Same as above, but with the PRO version.
+
+```html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			name="viewport"
+			content="width=device-width, height=device-height, initial-scale=1.0,
+            maximum-scale=1.0"
+		/>
+		<link
+			href="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.css"
+			rel="stylesheet"
+			type="text/css"
+		/>
+	</head>
+	<body>
+		<div id="jodit-editor"></div>
+		<script
+			type="text/javascript"
+			src="https://cdn.jsdelivr.net/npm/jodit-pro@latest/es2021/jodit.fat.min.js"
+		></script>
+		<script>
+			Jodit.make('#jodit-editor', {
+				license: '%your license key%'
+			});
+		</script>
+	</body>
+</html>
+```