Skip to content

Commit fc2107e

Browse files
JekataJekata
committed
kb(editor): syntax highlighter in HTML mode
1 parent 42b6ec5 commit fc2107e

File tree

2 files changed

+122
-0
lines changed

2 files changed

+122
-0
lines changed

‎knowledge-base/editor-code-syntax-highlighter-html-mode.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
title: Implementing a Code Syntax Highlight in HTML mode
3+
description: Learn how to implement a code syntax highlighting in HTML mode of RadEditor for ASP.NET AJAX
4+
type: how-to
5+
page_title: Implementing a Code Syntax Highlight in HTML mode
6+
slug: editor-code-syntax-highlighter-html-mode
7+
position:
8+
tags:
9+
ticketid: 1563373
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>RadEditor for ASP.NET AJAX</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
If you are curious to learn how to implement a code syntax highlighting in HTML mode of RadEditor, check out the Solution section below:
26+
27+
## Solution
28+
The solution is based on a custom third-party syntax editor, which replaces the source mode textarea of RadEditor when switching to HTML mode inside the [OnClientModeChange event]({%slug editor/client-side-programming/events/onclientmodechange%}). Once you get back to Design mode, the content is taken from the custom editor and set into the content area of RadEditor.
29+
30+
````ASP.NET
31+
<!DOCTYPE html>
32+
<html lang="en">
33+
34+
<head>
35+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
36+
<title>RadEditor Page</title>
37+
<link href="codemirror-5.65.3/lib/codemirror.css" rel="stylesheet" />
38+
<script src="codemirror-5.65.3/lib/codemirror.js"></script>
39+
<script src="codemirror-5.65.3/mode/xml/xml.js"></script>
40+
<script src="codemirror-5.65.3/mode/javascript/javascript.js"></script>
41+
<script src="codemirror-5.65.3/mode/css/css.js"></script>
42+
<script src="codemirror-5.65.3/mode/htmlmixed/htmlmixed.js"></script>
43+
44+
<style>
45+
div.CodeMirror {
46+
height: 248px;
47+
}
48+
</style>
49+
</head>
50+
51+
<body>
52+
<header>
53+
<h1>RadEditor Page</h1>
54+
</header>
55+
<main>
56+
<form id="form1" runat="server">
57+
<asp:ScriptManager runat="server" />
58+
<script>
59+
function OnClientModeChange(editor, args) {
60+
var mode = editor.get_mode();
61+
var myTextarea = editor.get_textArea();
62+
63+
switch (mode) {
64+
case 1:
65+
var codemirrorDiv = $telerik.$(".CodeMirror.cm-s-default");
66+
editor.set_html(codemirrorDiv[0].innerText);
67+
codemirrorDiv.remove();
68+
break;
69+
case 2:
70+
var editor = CodeMirror.fromTextArea(myTextarea, {
71+
lineNumbers: false
72+
});
73+
break;
74+
}
75+
76+
}
77+
</script>
78+
<telerik:RadEditor runat="server" Skin="Default" OnClientModeChange="OnClientModeChange">
79+
<Content>
80+
81+
<html>
82+
<!-- HTML comment -->
83+
<head>
84+
<title>Title</title>
85+
<style>
86+
h1 {
87+
font-family: Arial;
88+
color: burlywood;
89+
}
90+
91+
div {
92+
background: green;
93+
}
94+
95+
body {
96+
max-width: 500px;
97+
}
98+
</style>
99+
</head>
100+
<body>
101+
<h1>HTML Content Example</h1>
102+
<p>Line 1</p>
103+
</body>
104+
</html>
105+
​
106+
</Content>
107+
</telerik:RadEditor>
108+
109+
</form>
110+
</main>
111+
</body>
112+
</html>
113+
````
114+
115+
You can download the source code of the sample website from [here](files/editor-syntaxhighlighterHTMLmode.zip).
116+
117+
## See Also
118+
* [OnClientModeChange event]({%slug editor/client-side-programming/events/onclientmodechange%})
119+
* [Code Mirror third party library](https://codemirror.net/)
120+
* [Code Mirror MIT license](https://github.com/codemirror/CodeMirror/blob/master/LICENSE)
121+
122+

‎knowledge-base/files/editor-syntaxhighlighterHTMLmode.zip‎

843 KB
Binary file not shown.

0 commit comments

Comments
 (0)