Skip to content

Commit 1b9df57

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 03-20-2025 4:30:12 AM
1 parent 63f2c34 commit 1b9df57

File tree

112 files changed

+6925
-1342
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+6925
-1342
lines changed

‎ej2-vue-toc.html‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1766,7 +1766,20 @@
17661766
<li><a href="https://ej2.syncfusion.com/vue/documentation/api/maps/">API Reference</a></li>
17671767
</ul>
17681768
</li>
1769-
<li>
1769+
<li> Markdown Editor
1770+
<ul>
1771+
<li><a href="/ej2-vue/markdown-editor/getting-started">Getting Started</a></li>
1772+
<li><a href="/ej2-vue/markdown-editor/supported-markdown">Supported Markdown Syntax</a></li>
1773+
<li><a href="/ej2-vue/markdown-editor/toolbar">Toolbar Configuration</a></li>
1774+
<li><a href="/ej2-vue/markdown-editor/insert-table">Insert Table</a></li>
1775+
<li><a href="/ej2-vue/markdown-editor/insert-images">Insert Image</a></li>
1776+
<li><a href="/ej2-vue/markdown-editor/markdown-preview">Markdown to HTML Preview</a></li>
1777+
<li><a href="/ej2-vue/markdown-editor/custom-format">Customizing Markdown Syntax</a></li>
1778+
<li><a href="/ej2-vue/markdown-editor/mention-support">Mention Support</a></li>
1779+
<li><a href="/ej2-vue/markdown-editor/keyboard-support">Keyboard Shortcuts</a></li>
1780+
<li><a href="/ej2-vue/markdown-editor/accessibility">Accessibility</a></li>
1781+
</ul>
1782+
</li><li>
17701783
MaskedTextBox
17711784
<ul>
17721785
<li><a href="/ej2-vue/maskedtextbox/getting-started">Getting Started</a></li>
@@ -2361,7 +2374,6 @@
23612374
<li><a href="/ej2-vue/rich-text-editor/import-and-export">Content Import/Export</a></li>
23622375
<li><a href="/ej2-vue/rich-text-editor/spell-grammar-check">Spell and Grammar Check</a></li>
23632376
<li><a href="/ej2-vue/rich-text-editor/third-party-integration">Third-Party Integration</a></li>
2364-
<li><a href="/ej2-vue/rich-text-editor/markdown">Markdown</a></li>
23652377
<li><a href="/ej2-vue/rich-text-editor/globalization">Globalization</a></li>
23662378
<li><a href="/ej2-vue/rich-text-editor/file-browser">File Browser</a></li>
23672379
<li><a href="/ej2-vue/rich-text-editor/slash-menu">Slash Menu</a></li>

‎ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app-composition.vue‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<template>
2+
<div id="markdown-editor">
3+
<ejs-richtexteditor
4+
id="editor"
5+
ref="rteInstance"
6+
:toolbarSettings="toolbarSettings"
7+
:created="created"
8+
:editorMode="editorMode"
9+
:value="rteValue"
10+
:formatter="formatter"
11+
>
12+
</ejs-richtexteditor>
13+
</div>
14+
</template>
15+
16+
<style>
17+
.e-richtexteditor .e-rte-content .e-content{
18+
min-height: 150px;
19+
}
20+
.e-richtexteditor .e-rte-content textarea.e-content {
21+
float: left;
22+
border-right: 1px solid rgba(0, 0, 0, 0.12);
23+
}
24+
.e-richtexteditor .e-rte-content {
25+
overflow: hidden;
26+
}
27+
.e-md-preview::before {
28+
content: '\e345';
29+
}
30+
31+
.e-rte-content .e-content.e-pre-source {
32+
width: 100%;
33+
}
34+
.e-icon-btn.e-active .e-md-preview.e-icons::before {
35+
content: '\e350';
36+
}
37+
</style>
38+
39+
<script setup>
40+
import {
41+
RichTextEditorComponent,
42+
Toolbar,
43+
Link,
44+
Image,
45+
Table,
46+
MarkdownEditor, MarkdownFormatter
47+
} from '@syncfusion/ej2-vue-richtexteditor';
48+
import { marked } from 'marked';
49+
50+
const formatter = new MarkdownFormatter({
51+
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
52+
formatTags: {
53+
'Blockquote': '> '
54+
},
55+
selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
56+
});
57+
const rteInstance = ref(null);
58+
const rteValue = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
59+
let textArea = null;
60+
let id= '';
61+
let mdsource= null;
62+
let htmlPreview= null;
63+
let previewTextArea= null;
64+
65+
const toolbarSettings = {
66+
items: [
67+
'Bold', 'Italic', 'StrikeThrough', '|',
68+
'Formats', 'OrderedList', 'UnorderedList', '|',
69+
'CreateLink', 'Image', '|',
70+
{
71+
tooltipText: 'Preview',
72+
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
73+
'<span class="e-btn-icon e-md-preview e-icons"></span></button>'
74+
},
75+
'|', 'Undo', 'Redo'
76+
]
77+
};
78+
const editorMode = 'Markdown';
79+
const created = () => {
80+
this.rteObj = this.$refs.rteInstance.ej2Instances;
81+
this.textArea = this.rteObj.contentModule.getEditPanel();
82+
this.id = this.$refs.rteInstance.ej2Instances.getID() + 'html-preview';
83+
this.mdsource = document.getElementById('preview-code');
84+
this.htmlPreview = this.rteObj.element.querySelector(this.id);
85+
this.previewTextArea =
86+
this.rteObj.element.querySelector('.e-rte-content');
87+
this.textArea.onkeyup = (Event) => {
88+
this.markDownConversion();
89+
};
90+
this.mdsource.onclick = (e) => {
91+
this.fullPreview();
92+
if (e.currentTarget.classList.contains('e-active')) {
93+
this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
94+
} else {
95+
this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
96+
}
97+
};
98+
};
99+
const markDownConversion = () => {
100+
if (this.mdsource.classList.contains('e-active')) {
101+
this.htmlPreview.innerHTML = marked(this.textArea.value);
102+
}
103+
};
104+
const fullPreview = (event) => {
105+
if (this.mdsource.classList.contains('e-active')) {
106+
this.mdsource.classList.remove('e-active');
107+
this.textArea.style.display = 'block';
108+
this.htmlPreview.style.display = 'none';
109+
this.previewTextArea.style.overflow = 'hidden';
110+
} else {
111+
this.mdsource.classList.add('e-active');
112+
if (!this.htmlPreview) {
113+
this.htmlPreview = document.createElement('div');
114+
this.htmlPreview.setAttribute('class', 'e-content e-pre-source');
115+
this.htmlPreview.setAttribute('id', this.id);
116+
this.textArea.parentNode.appendChild(this.htmlPreview);
117+
this.previewTextArea.style.overflow = 'auto';
118+
}
119+
if (this.previewTextArea.style.overflow === 'hidden') {
120+
this.previewTextArea.style.overflow = 'auto';
121+
}
122+
this.textArea.style.display = 'none';
123+
this.htmlPreview.style.display = 'block';
124+
this.htmlPreview.innerHTML = marked(this.textArea.value);
125+
this.mdsource.parentElement.title = 'Code View';
126+
}
127+
}
128+
provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor, MarkdownFormatter]);
129+
</script>
130+
131+
<style>
132+
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
133+
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
134+
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
135+
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
136+
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
137+
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
138+
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
139+
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
140+
</style>

‎ej2-vue/code-snippet/markdown-editor/custom-format-cs1/app.vue‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<template>
2+
<div id="markdown-editor">
3+
<ejs-richtexteditor
4+
id="editor"
5+
ref="rteInstance"
6+
:toolbarSettings="toolbarSettings"
7+
:created="created"
8+
:editorMode="editorMode"
9+
:value="rteValue"
10+
:formatter="formatter"
11+
>
12+
</ejs-richtexteditor>
13+
</div>
14+
</template>
15+
16+
<style>
17+
.e-richtexteditor .e-rte-content .e-content {
18+
min-height: 150px;
19+
}
20+
.e-richtexteditor .e-rte-content textarea.e-content {
21+
float: left;
22+
border-right: 1px solid rgba(0, 0, 0, 0.12);
23+
}
24+
.e-richtexteditor .e-rte-content {
25+
overflow: hidden;
26+
}
27+
.e-md-preview::before {
28+
content: '\e345';
29+
}
30+
31+
.e-rte-content .e-content.e-pre-source {
32+
width: 100%;
33+
}
34+
.e-icon-btn.e-active .e-md-preview.e-icons::before {
35+
content: '\e350';
36+
}
37+
</style>
38+
39+
<script>
40+
import {
41+
RichTextEditorComponent,
42+
Toolbar,
43+
Link,
44+
Image,Table,
45+
MarkdownEditor, MarkdownFormatter
46+
} from '@syncfusion/ej2-vue-richtexteditor';
47+
import { marked } from 'marked';
48+
49+
export default {
50+
name: "App",
51+
components: {
52+
"ejs-richtexteditor":RichTextEditorComponent
53+
},
54+
data: function() {
55+
return {
56+
rteValue: 'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.',
57+
id: '',
58+
mdsource: null,
59+
htmlPreview: null,
60+
textArea: null,
61+
previewTextArea: null,
62+
editorMode: 'Markdown',
63+
toolbarSettings: {
64+
items: [
65+
'Bold', 'Italic', 'StrikeThrough', '|',
66+
'Formats', 'OrderedList', 'UnorderedList', '|',
67+
'CreateLink', 'Image', '|',
68+
{
69+
tooltipText: 'Preview',
70+
template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
71+
'<span class="e-btn-icon e-md-preview e-icons"></span></button>'
72+
},
73+
'|', 'Undo', 'Redo'
74+
]
75+
},
76+
formatter: new MarkdownFormatter({
77+
listTags: { 'OL': '1., 2., 3.', 'UL': '+ ' },
78+
formatTags: {
79+
'Blockquote': '> '
80+
},
81+
selectionTags: { 'Bold': ' __ ', 'Italic': ' _ ' }
82+
}),
83+
}
84+
};
85+
methods: {
86+
created: function () {
87+
this.rteObj = this.$refs.rteInstance.ej2Instances;
88+
this.textArea = this.rteObj.contentModule.getEditPanel();
89+
this.id = this.$refs.rteInstance.ej2Instances.getID() + 'html-preview';
90+
this.mdsource = document.getElementById('preview-code');
91+
this.htmlPreview = this.rteObj.element.querySelector(this.id);
92+
this.previewTextArea =
93+
this.rteObj.element.querySelector('.e-rte-content');
94+
this.textArea.onkeyup = (Event) => {
95+
this.markDownConversion();
96+
};
97+
this.mdsource.onclick = (e) => {
98+
this.fullPreview();
99+
if (e.currentTarget.classList.contains('e-active')) {
100+
this.$refs.rteInstance.disableToolbarItem(['CreateTable']);
101+
} else {
102+
this.$refs.rteInstance.enableToolbarItem(['CreateTable']);
103+
}
104+
};
105+
},
106+
markDownConversion: function () {
107+
if (this.mdsource.classList.contains('e-active')) {
108+
this.htmlPreview.innerHTML = marked(this.textArea.value);
109+
}
110+
},
111+
fullPreview: function () {
112+
if (this.mdsource.classList.contains('e-active')) {
113+
this.mdsource.classList.remove('e-active');
114+
this.textArea.style.display = 'block';
115+
this.htmlPreview.style.display = 'none';
116+
this.previewTextArea.style.overflow = 'hidden';
117+
} else {
118+
this.mdsource.classList.add('e-active');
119+
if (!this.htmlPreview) {
120+
this.htmlPreview = document.createElement('div');
121+
this.htmlPreview.setAttribute('class', 'e-content e-pre-source');
122+
this.htmlPreview.setAttribute('id', this.id);
123+
this.textArea.parentNode.appendChild(this.htmlPreview);
124+
this.previewTextArea.style.overflow = 'auto';
125+
}
126+
if (this.previewTextArea.style.overflow === 'hidden') {
127+
this.previewTextArea.style.overflow = 'auto';
128+
}
129+
this.textArea.style.display = 'none';
130+
this.htmlPreview.style.display = 'block';
131+
this.htmlPreview.innerHTML = marked(this.textArea.value);
132+
this.mdsource.parentElement.title = 'Code View';
133+
}
134+
},
135+
},
136+
provide:{
137+
richtexteditor:[Toolbar, Link, Image,Table, MarkdownEditor, MarkdownFormatter]
138+
}
139+
}
140+
</script>
141+
142+
<style>
143+
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
144+
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
145+
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
146+
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
147+
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
148+
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
149+
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
150+
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
151+
</style>

‎ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.e-richtexteditor .e-rte-content .e-content {
2+
min-height: 150px;
3+
}
4+
.e-richtexteditor .e-rte-content textarea.e-content {
5+
float: left;
6+
border-right: 1px solid rgba(0, 0, 0, 0.12);
7+
}
8+
.e-richtexteditor .e-rte-content {
9+
overflow: hidden;
10+
}
11+
.e-md-preview::before {
12+
content: '\e345';
13+
}
14+
15+
.e-rte-content .e-content.e-pre-source {
16+
width: 100%;
17+
}
18+
.e-icon-btn.e-active .e-md-preview.e-icons::before {
19+
content: '\e350';
20+
}

‎ej2-vue/code-snippet/markdown-editor/custom-format-cs1/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
7+
<title>EJ2 Vue Sample</title>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<meta name="description" content="Typescript UI Controls" />
11+
<meta name="author" content="Syncfusion" />
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
13+
<link href="https://cdn.syncfusion.com/ej2/20.3.56/material.css" rel="stylesheet" />
14+
<link href="index.css" rel="stylesheet" />
15+
<script src="systemjs.config.js"></script>
16+
</head>
17+
18+
<body>
19+
<div id='app'>Loading....</div>
20+
</body>
21+
22+
</html>
23+

0 commit comments

Comments
 (0)