- In Readonly mode, the ability to disable navigation by links has be…

…en added. By default, the option is enabled.
xdan · Feb 20, 2025 · 241e3ab · 241e3ab
1 parent 74a3bf1
commit 241e3ab
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,21 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.5.17
+
+### :rocket: New Feature
+
+- In Readonly mode, the ability to disable navigation by links has been added. By default, the option is enabled.
+
+```js
+const editor = Jodit.make('#editor', {
+  readonly: true,
+  link: {
+    preventReadOnlyNavigation: true
+  }
+});
+```
+
 ## 4.5.12
 
 #### :house: Internal

diff --git a/public/stand.html b/public/stand.html
@@ -41,7 +41,9 @@
 			<h1>Jodit Test Document</h1>
 			<form id="form">
 				<div id="app"></div>
-				<textarea id="editorNative"></textarea>
+				<textarea id="editorNative">
+					Hello <a href="https://xdsoft.net/jodit">Jodit</a> World!
+				</textarea>
 			</form>
 		</div>
 		<script>
@@ -51,10 +53,59 @@ <h1>Jodit Test Document</h1>
 			// root.innerHTML = '<link rel="stylesheet" href="./build/es2021/jodit.fat.min.css"/><div id="edit"></div>';
 			// const editor = Jodit.make('root.getElementById('edit')', {
 			const editor = Jodit.make('#editorNative', {
-				toolbarInlineForSelection: true,
-				commandToHotkeys: {
-					someCustomCommand: 'shift+space'
+				// readonly: true,
+				showXPathInStatusbar: false,
+				placeholder: "Start typing...",
+				toolbar: true,
+				askBeforePasteHTML: false,
+				cleanHTML: {
+					pastedHTML: true,
 				},
+				buttons: [
+					"fullsize",
+				],
+				style: {
+					fontSize: "16px",
+					lineHeight: "1.5",
+					padding: "10px",
+					// minheight: "65vh",
+					maxheight: "65vh",
+				},
+				// iframe: true,
+				iframeCSS: `
+          body {
+            margin: 0;
+            padding: 0;
+            font-size: 16px;
+            line-height: 1.5;
+          }
+          table {
+            border-collapse: collapse !important;
+            width: 100% !important;
+            border: 2px solid #000 !important;
+          }
+          th, td {
+            border: 2px solid #000 !important;
+            padding: 8px !important;
+            text-align: left !important;
+          }
+          th {
+            background-color: #f2f2f2 !important;
+          }
+        `,
+				contentStyle: `
+          table {
+            border-collapse: collapse;
+            width: 100%;
+            border: 2px solid black !important;
+          }
+          th, td {
+            border: 2px solid black !important;
+            padding: 8px !important;
+            text-align: left;
+          }
+        `,
+				maxheight: "65vh",
 				// direction: 'rtl',
 				// tabIndex: 0,
 				// shadowRoot: root,
@@ -141,31 +192,6 @@ <h1>Jodit Test Document</h1>
 					},
 				},
 			});
-
-			editor.value =  '<p style="font-size: 16.5pt; margin: 0"><a href="stand.html"><img src="https://xdsoft.net/jodit/finder/files/pexels-arianna-jade-4006617.jpg" id="lio" alt="Tada" style="margin: 1px 2px 3px 4px; border: 2px solid #f00;" title="Ola ha" width="300"></a>Body Subtitle</p>\n' +
-				'<table><tbody><tr><th>header</th><td>1</td></tr></tbody></table>' +
-				'<p style="font-size: 10pt; line-height: normal; margin: 7px 0 0 0;">To modify this template, place it into your Outlook editor.</p>';
-			editor.value = '';
-			// editor.events.fire(
-			// 	'openImageProperties',
-			// 	editor.editor.querySelector('img')
-			// );
-			btn.onclick = () => {
-				const start = performance.now();
-				for (let i = 0; i < 100; i++) {
-					editor.toolbar.build(editor.o.buttons);
-				}
-				const res = performance.now() - start;
-				form.appendChild(
-					editor.create.fromHTML(
-						'<input name="content" value="' + res + '">'
-					)
-				);
-			};
-
-			// delete editor;
-			// const box = new UIBox(editor1);
-			// alert(box.container.outerHTML);
 		</script>
 		<style>
 			.class1 {

diff --git a/src/plugins/link/config.ts b/src/plugins/link/config.ts
@@ -73,6 +73,11 @@ declare module 'jodit/config' {
 			selectOptionsClassName: IUIOption[];
 
 			hotkeys: string[];
+
+			/**
+			 * Prevent navigation to the link if it is readonly. Default: true
+			 */
+			preventReadOnlyNavigation: boolean;
 		};
 	}
 }
@@ -86,6 +91,7 @@ Config.prototype.link = {
 	openInNewTabCheckbox: true,
 	modeClassName: 'input',
 	selectMultipleClassName: true,
+	preventReadOnlyNavigation: true,
 	selectSizeClassName: 3,
 	selectOptionsClassName: [],
 	hotkeys: ['ctrl+k', 'cmd+k']

diff --git a/src/plugins/link/link.ts b/src/plugins/link/link.ts
@@ -43,9 +43,11 @@ export class link extends Plugin {
 	/** @override */
 	protected override afterInit(jodit: IJodit): void {
 		if (jodit.o.link.followOnDblClick) {
-			jodit.e.on('dblclick.link', this.onDblClickOnLink);
+			jodit.e.on('dblclick.link', this.__onDblClickOnLink);
 		}
 
+		jodit.e.on(jodit.editor, 'click.link', this.__onClickReadOnlyLink);
+
 		if (jodit.o.link.processPastedLink) {
 			jodit.e.on('processPaste.link', this.onProcessPasteLink);
 		}
@@ -76,7 +78,7 @@ export class link extends Plugin {
 	}
 
 	@autobind
-	private onDblClickOnLink(e: MouseEvent): void {
+	private __onDblClickOnLink(e: MouseEvent): void {
 		if (!Dom.isTag(e.target, 'a')) {
 			return;
 		}
@@ -348,9 +350,23 @@ export class link extends Plugin {
 	protected override beforeDestruct(jodit: IJodit): void {
 		jodit.e
 			.off('generateLinkForm.link', this.__generateForm)
-			.off('dblclick.link', this.onDblClickOnLink)
+			.off('dblclick.link', this.__onDblClickOnLink)
+			.off(jodit.editor, 'click.link', this.__onClickReadOnlyLink)
 			.off('processPaste.link', this.onProcessPasteLink);
 	}
+
+	@autobind
+	private __onClickReadOnlyLink(e: MouseEvent): void {
+		const { jodit } = this;
+
+		if (
+			jodit.o.readonly &&
+			jodit.o.link.preventReadOnlyNavigation &&
+			Dom.isTag(e.target, 'a')
+		) {
+			e.preventDefault();
+		}
+	}
 }
 
 pluginSystem.add('link', link);