jodit
Version:
Jodit is awesome and usefully wysiwyg editor with filebrowser
174 lines (168 loc) • 6.8 kB
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>
<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/doc/">Documentation</a></li>
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
<li><a href="https://github.com/xdan/jodit/blob/master/CHANGELOG.MD">Changelog</a></li>
<li>
<a href="javascript:void(0)">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">
var editor = new Jodit('#editor', {
events: {
getIcon: function (name, control, clearName) {
var 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/doc/">Documentation</a></li>
<li><a href="https://github.com/xdan/jodit/">Github</a></li>
<li><a href="https://github.com/xdan/jodit/blob/master/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="../build/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="../build/jodit.min.js"></script>
<script src="assets/prism.js"></script>
<script src="assets/app.js"></script>
<script>
var editor = new Jodit('#area_editor', {
events: {
getIcon: function (name, control, clearName) {
var 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>';
}
}
});
</script>
</html>