Skip to content

Commit e84d1ad

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 11-03-2025 1:30:04 PM
1 parent e9508b7 commit e84d1ad

File tree

25 files changed

+823
-47
lines changed

25 files changed

+823
-47
lines changed

‎ej2-javascript-toc.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2127,7 +2127,7 @@
21272127
<li><a href="/ej2-javascript/rich-text-editor/smart-editing/mentions">Mention Integration</a></li>
21282128
<li><a href="/ej2-javascript/rich-text-editor/smart-editing/slash-menu">Slash Commands</a></li>
21292129
<li><a href="/ej2-javascript/rich-text-editor/smart-editing/emoji-picker">Emoji Picker</a></li>
2130-
<li><a href="/ej2-javascript/rich-text-editor/mail-merge">Mail Merge Integration</a></li>
2130+
<li><a href="/ej2-javascript/rich-text-editor/smart-editing/mail-merge">Mail Merge Integration</a></li>
21312131
</ul>
21322132
</li>
21332133
<li>Validation and Security

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/index.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
height: 40px;
8+
left: 45%;
9+
position: absolute;
10+
top: 45%;
11+
width: 30%;
12+
}
13+
14+
#element1, #element2 {
15+
background: #333333;
16+
border: 1px solid #cecece;
17+
box-sizing: border-box;
18+
float: left;
19+
height: 100px;
20+
width:100px;
21+
}
22+
23+
#element2 {
24+
margin-left: 20px;
25+
}
26+
html, body{
27+
width:100%;
28+
height: 100%;
29+
}

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/index.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
var editor = new ej.richtexteditor.RichTextEditor({
2+
value: `
3+
4+
<table style="width:100%; border-collapse: collapse;" border="1">
5+
<thead>
6+
<tr>
7+
<th style="font-weight:bold; padding:8px;">Product</th>
8+
<th style="font-weight:bold; padding:8px;">Price</th>
9+
<th style="font-weight:bold; padding:8px;">Stock</th>
10+
</tr>
11+
</thead>
12+
<tbody>
13+
<tr>
14+
<td style="padding:8px;">Product A</td>
15+
<td style="padding:8px;">$25</td>
16+
<td style="padding:8px;">Available</td>
17+
</tr>
18+
<tr>
19+
<td style="padding:8px;">Product B</td>
20+
<td style="padding:8px;">$40</td>
21+
<td style="padding:8px;">Out of Stock</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
`,
26+
height: 300,
27+
});
28+
editor.appendTo('#editor');
29+
30+
document.getElementById('btn').onclick = function () {
31+
var panel = editor.contentModule.getEditPanel();
32+
var cells = panel.querySelectorAll('td');
33+
34+
if (cells.length > 2) {
35+
var cell = cells[2]; // Third cell
36+
var range = document.createRange();
37+
range.selectNode(cell); // Logical selection
38+
39+
var selection = window.getSelection();
40+
selection.removeAllRanges();
41+
selection.addRange(range);
42+
cell.style.backgroundColor = '#cce5ff';
43+
// Add Syncfusion's selection class for visual consistency
44+
cell.classList.add('e-cell-select');
45+
}
46+
};

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/index.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import {RichTextEditor,Toolbar,Link,Image,HtmlEditor,QuickToolbar} from '@syncfusion/ej2-richtexteditor';
2+
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
3+
4+
let editor: RichTextEditor = new RichTextEditor({
5+
value: `<table style="width:100%; border-collapse: collapse;" border="1">
6+
<thead>
7+
<tr>
8+
<th style="font-weight:bold; padding:8px;">Product</th>
9+
<th style="font-weight:bold; padding:8px;">Price</th>
10+
<th style="font-weight:bold; padding:8px;">Stock</th>
11+
</tr>
12+
</thead>
13+
<tbody>
14+
<tr>
15+
<td style="padding:8px;">Product A</td>
16+
<td style="padding:8px;">$25</td>
17+
<td style="padding:8px;">Available</td>
18+
</tr>
19+
<tr>
20+
<td style="padding:8px;">Product B</td>
21+
<td style="padding:8px;">$40</td>
22+
<td style="padding:8px;">Out of Stock</td>
23+
</tr>
24+
</tbody>
25+
</table>`,
26+
});
27+
editor.appendTo('#editor');
28+
29+
document.getElementById('btn').onclick = function () {
30+
const panel: HTMLElement = editor.contentModule.getEditPanel() as HTMLElement;
31+
const cells: NodeListOf<HTMLTableCellElement> = panel.querySelectorAll('td');
32+
33+
if (cells.length > 0) {
34+
const cell: HTMLTableCellElement = cells[0]; // First cell
35+
const range: Range = document.createRange();
36+
range.selectNode(cell); // Logical selection of entire cell
37+
38+
const selection: Selection | null = window.getSelection();
39+
if (selection) {
40+
selection.removeAllRanges();
41+
selection.addRange(range);
42+
}
43+
cell.style.backgroundColor = '#cce5ff';
44+
// Add Syncfusion's selection class for visual consistency
45+
cell.classList.add('e-cell-select');
46+
}
47+
};

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/js/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html><html lang="en"><head>
2+
<title>Essential JS 2 Rich Text Editor</title>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="description" content="Typescript UI Controls">
6+
<meta name="author" content="Syncfusion">
7+
<link href="index.css" rel="stylesheet">
8+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
9+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-richtexteditor/styles/material.css" rel="stylesheet">
10+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet">
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet">
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet">
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet">
16+
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
17+
</head>
18+
19+
<body>
20+
<div id='loader'>Loading....</div>
21+
<div id="container">
22+
<div style="margin: 0 0 10px 0">
23+
<button id="btn" class="e-btn">Select Cell</button>
24+
</div>
25+
<div class="default-section">
26+
<div id="editor"></div>
27+
</div>
28+
</div>
29+
<script>
30+
var ele = document.getElementById('container');
31+
if(ele) {
32+
ele.style.visibility = "visible";
33+
}
34+
</script>
35+
<script src="index.js" type="text/javascript"></script>
36+
</body></html>

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/systemjs.config.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
System.config({
2+
transpiler: "typescript",
3+
typescriptOptions: {
4+
compilerOptions: {
5+
target: "umd",
6+
module: "commonjs",
7+
moduleResolution: "node",
8+
emitDecoratorMetadata: true,
9+
experimentalDecorators: true
10+
}
11+
},
12+
paths: {
13+
"syncfusion:": "https://cdn.syncfusion.com/ej2/"
14+
},
15+
map: {
16+
main: "index.ts",
17+
typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
18+
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
19+
"@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
20+
"@syncfusion/ej2-data":"syncfusion:ej2-data/dist/ej2-data.umd.min.js",
21+
"@syncfusion/ej2-inputs":"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
22+
"@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
23+
"@syncfusion/ej2-lists":"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
24+
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
25+
"@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js",
26+
"@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
27+
"@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
28+
"@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
29+
"@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
30+
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
31+
"@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
32+
"@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
33+
"@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
34+
"@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js",
35+
"@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
36+
"@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js"
37+
}
38+
});
39+
40+
System.import('index.ts').catch(console.error.bind(console)).then(function () {
41+
document.getElementById('loader').style.display = "none";
42+
document.getElementById('container').style.visibility = "visible";
43+
});

‎ej2-javascript/code-snippet/rich-text-editor/cell-selection/ts/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Essential JS 2 Rich Text Editor</title>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="description" content="Typescript UI Controls" />
9+
<meta name="author" content="Syncfusion" />
10+
<link href="index.css" rel="stylesheet" />
11+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
12+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-inputs/styles/material.css" rel="stylesheet" />
14+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-lists/styles/material.css" rel="stylesheet" />
15+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/material.css" rel="stylesheet" />
16+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet" />
17+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet" />
18+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
20+
<script src="systemjs.config.js"></script>
21+
</head>
22+
23+
<body>
24+
<div id='loader'>Loading....</div>
25+
<div id="container">
26+
<div style="margin: 0 0 10px 0">
27+
<button id="btn" class="e-btn">Select Cell</button>
28+
</div>
29+
<div class="default-section">
30+
<div id="editor"></div>
31+
</div>
32+
</div>
33+
</body>
34+
35+
</html>

‎ej2-javascript/code-snippet/rich-text-editor/node-selection/index.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#container {
2+
visibility: hidden;
3+
}
4+
5+
#loader {
6+
color: #008cff;
7+
height: 40px;
8+
left: 45%;
9+
position: absolute;
10+
top: 45%;
11+
width: 30%;
12+
}
13+
14+
#element1, #element2 {
15+
background: #333333;
16+
border: 1px solid #cecece;
17+
box-sizing: border-box;
18+
float: left;
19+
height: 100px;
20+
width:100px;
21+
}
22+
23+
#element2 {
24+
margin-left: 20px;
25+
}
26+
html, body{
27+
width:100%;
28+
height: 100%;
29+
}

‎ej2-javascript/code-snippet/rich-text-editor/node-selection/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var editor = new ej.richtexteditor.RichTextEditor({
2+
value: `<p>This is paragraph one.</p><p>This is paragraph two.</p>`,
3+
});
4+
editor.appendTo('#editor');
5+
6+
document.getElementById('btn').onclick = function () {
7+
const panel = editor.contentModule.getEditPanel();
8+
const paragraphs = panel.querySelectorAll('p');
9+
10+
if (paragraphs.length > 1) {
11+
const range = document.createRange();
12+
range.selectNode(paragraphs[1]); // Select the second paragraph
13+
14+
const selection = window.getSelection();
15+
selection.removeAllRanges();
16+
selection.addRange(range);
17+
}
18+
};

‎ej2-javascript/code-snippet/rich-text-editor/node-selection/index.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {RichTextEditor,Toolbar,Link,Image,HtmlEditor,QuickToolbar} from '@syncfusion/ej2-richtexteditor';
2+
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, QuickToolbar);
3+
4+
let editor: RichTextEditor = new RichTextEditor({
5+
value: `<p>This is paragraph one.</p><p>This is paragraph two.</p>`,
6+
});
7+
editor.appendTo('#editor');
8+
9+
document.getElementById('btn').onclick = function () {
10+
const panel = editor.contentModule.getEditPanel() as HTMLElement;
11+
const paragraphs: NodeListOf<HTMLParagraphElement> = panel.querySelectorAll('p');
12+
13+
if (paragraphs.length > 1) {
14+
const range: Range = document.createRange();
15+
range.selectNode(paragraphs[1]); // Select the second paragraph
16+
17+
const selection: Selection | null = window.getSelection();
18+
if (selection) {
19+
selection.removeAllRanges();
20+
selection.addRange(range);
21+
}
22+
}
23+
};

0 commit comments

Comments
 (0)