221 lines
5.5 KiB
HTML
221 lines
5.5 KiB
HTML
<!doctype html>
|
|
<!--
|
|
* Jodit Editor (https://xdsoft.net/jodit/)
|
|
* License GNU General Public License version 2 or later;
|
|
* Copyright 2013-2020 Valeriy Chupurnov https://xdsoft.net
|
|
-->
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
/>
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
<title>Jodit Example - Custom Icons</title>
|
|
<link rel="icon" type="image/png" href="assets/icon.png" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<ul class="container">
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/play.html"
|
|
>Playground</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/docs/"
|
|
>Documentation</a
|
|
>
|
|
</li>
|
|
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md"
|
|
>Changelog</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#examples">Examples</a>
|
|
<ul id="examples">
|
|
<!-- see app.js-->
|
|
</ul>
|
|
</li>
|
|
<li style="float: right">
|
|
<a href="https://github.com/xdan/jodit/releases/latest"
|
|
>Download</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<div id="main_container" class="container">
|
|
<div id="introduction">
|
|
<h3>HTML</h3>
|
|
<pre><code class="language-markup">
|
|
<script src="https://use.fontawesome.com/c1f20c2bd7.js"></script>
|
|
<textarea id="editor"></textarea>
|
|
</code></pre>
|
|
<h3>JavaScript</h3>
|
|
<pre><code class="language-javascript">
|
|
const editor = Jodit.make('#editor', {
|
|
getIcon: function (name, clearName) {
|
|
let code = clearName;
|
|
|
|
switch (clearName) {
|
|
case 'redo':
|
|
code = 'rotate-right';
|
|
break;
|
|
case 'video':
|
|
code = 'video-camera';
|
|
break;
|
|
case 'copyformat':
|
|
code = 'clone';
|
|
break;
|
|
case 'about':
|
|
code = 'question';
|
|
break;
|
|
case 'selectall':
|
|
code = 'legal';
|
|
break;
|
|
case 'symbol':
|
|
return '<span style="text-align: center;font-size:14px;">Ω</span>';
|
|
case 'hr':
|
|
code = 'minus';
|
|
break;
|
|
case 'left':
|
|
case 'right':
|
|
case 'justify':
|
|
case 'center':
|
|
code = 'align-' + name;
|
|
break;
|
|
case 'brush':
|
|
code = 'tint';
|
|
break;
|
|
case 'fontsize':
|
|
code = 'text-height';
|
|
break;
|
|
case 'ul':
|
|
case 'ol':
|
|
code = 'list-' + name;
|
|
break;
|
|
case 'source':
|
|
code = 'code';
|
|
break;
|
|
}
|
|
|
|
return '<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>';
|
|
}
|
|
});
|
|
editor.setEditorValue('<p>start</p>')
|
|
</code></pre>
|
|
</div>
|
|
<div class="result">
|
|
<textarea id="area_editor"></textarea>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<nav>
|
|
<ul class="container">
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/">Jodit homepage</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/play.html"
|
|
>Playground</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://xdsoft.net/jodit/docs/"
|
|
>Documentation</a
|
|
>
|
|
</li>
|
|
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
|
|
<li>
|
|
<a
|
|
href="https://github.com/xdan/jodit/blob/main/CHANGELOG.md"
|
|
>Changelog</a
|
|
>
|
|
</li>
|
|
<li style="float: right">
|
|
<a href="https://github.com/xdan/jodit/releases/latest"
|
|
>Download</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</footer>
|
|
</body>
|
|
<link rel="stylesheet" href="./es2015/jodit.min.css" />
|
|
<link rel="stylesheet" href="assets/app.css" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://use.fontawesome.com/c1f20c2bd7.js"></script>
|
|
|
|
<script src="./es2015/jodit.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
|
|
<script src="assets/app.js"></script>
|
|
<script>
|
|
const editor = Jodit.make('#area_editor', {
|
|
getIcon: (name, clearName) => {
|
|
let code = clearName || name;
|
|
|
|
switch (clearName) {
|
|
case 'redo':
|
|
code = 'rotate-right';
|
|
break;
|
|
case 'video':
|
|
code = 'video-camera';
|
|
break;
|
|
case 'copyformat':
|
|
code = 'clone';
|
|
break;
|
|
case 'about':
|
|
code = 'question';
|
|
break;
|
|
case 'selectall':
|
|
code = 'legal';
|
|
break;
|
|
case 'symbol':
|
|
return '<span style="text-align: center;font-size:14px;">Ω</span>';
|
|
case 'hr':
|
|
code = 'minus';
|
|
break;
|
|
case 'left':
|
|
case 'right':
|
|
case 'justify':
|
|
case 'center':
|
|
code = 'align-' + name;
|
|
break;
|
|
case 'brush':
|
|
code = 'tint';
|
|
break;
|
|
case 'fontsize':
|
|
code = 'text-height';
|
|
break;
|
|
case 'ul':
|
|
case 'ol':
|
|
code = 'list-' + name;
|
|
break;
|
|
case 'source':
|
|
code = 'code';
|
|
break;
|
|
}
|
|
|
|
return (
|
|
'<i style="font-size:14px" class="fa fa-' +
|
|
code +
|
|
' fa-xs"></i>'
|
|
);
|
|
}
|
|
});
|
|
</script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" />
|
|
</html>
|