summernote-webpack
Version:
Super simple WYSIWYG editor
441 lines (262 loc) • 9.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>summernote</title>
<style>
body {
margin:0;
padding:10px 20px;
background:#fff;
color:#222;
}
h1, div, footer {
font-family:"Helvetica Neue", Arial, sans-serif;
}
h1 {
margin:0 0 20px;
font-size:32px;
font-weight:normal;
}
h1 small {
font-size: 0.8em;
padding-left: 2em;
}
.icons {
margin-bottom:40px;
-webkit-column-count:5;
-moz-column-count:5;
column-count:5;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.icons__item,
.icons__item i {
line-height:2em;
cursor:pointer;
overflow:hidden;
}
.icons__item:hover {
color:#3c90be;
}
.icons__item i {
display:inline-block;
width:32px;
text-align:center;
}
.icons__item:hover i {
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
footer {
margin-top:40px;
font-size:14px;
color:#999;
}
/* Generated by grunt-webfont */
/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
@font-face {
font-family:"summernote";
src:url("../../../font/summernote.eot?e15e05030869e84a387dc011162f70ae");
src:url("../../../font/summernote.eot?#iefix") format("embedded-opentype"),
url("../../../font/summernote.woff?e15e05030869e84a387dc011162f70ae") format("woff"),
url("../../../font/summernote.ttf?e15e05030869e84a387dc011162f70ae") format("truetype");
font-weight:normal;
font-style:normal;
}
/* Bootstrap Overrides */
[class^="note-icon-"]:before,
[class*=" note-icon-"]:before {
display:inline-block;
vertical-align:middle;
font: normal normal normal 14px summernote;
font-size: inherit;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Icons */
.note-icon-align-center:before {
content:"\f101";
}
.note-icon-align-indent:before {
content:"\f102";
}
.note-icon-align-justify:before {
content:"\f103";
}
.note-icon-align-left:before {
content:"\f104";
}
.note-icon-align-outdent:before {
content:"\f105";
}
.note-icon-align-right:before {
content:"\f106";
}
.note-icon-align:before {
content:"\f107";
}
.note-icon-arrows-alt:before {
content:"\f108";
}
.note-icon-bold:before {
content:"\f109";
}
.note-icon-caret:before {
content:"\f10a";
}
.note-icon-chain-broken:before {
content:"\f10b";
}
.note-icon-circle:before {
content:"\f10c";
}
.note-icon-close:before {
content:"\f10d";
}
.note-icon-code:before {
content:"\f10e";
}
.note-icon-eraser:before {
content:"\f10f";
}
.note-icon-font:before {
content:"\f110";
}
.note-icon-frame:before {
content:"\f111";
}
.note-icon-italic:before {
content:"\f112";
}
.note-icon-link:before {
content:"\f113";
}
.note-icon-magic:before {
content:"\f114";
}
.note-icon-menu-check:before {
content:"\f115";
}
.note-icon-minus:before {
content:"\f116";
}
.note-icon-orderedlist:before {
content:"\f117";
}
.note-icon-pencil:before {
content:"\f118";
}
.note-icon-picture:before {
content:"\f119";
}
.note-icon-question:before {
content:"\f11a";
}
.note-icon-redo:before {
content:"\f11b";
}
.note-icon-special-character:before {
content:"\f11c";
}
.note-icon-square:before {
content:"\f11d";
}
.note-icon-strikethrough:before {
content:"\f11e";
}
.note-icon-subscript:before {
content:"\f11f";
}
.note-icon-summernote:before {
content:"\f120";
}
.note-icon-superscript:before {
content:"\f121";
}
.note-icon-table:before {
content:"\f122";
}
.note-icon-text-height:before {
content:"\f123";
}
.note-icon-trash:before {
content:"\f124";
}
.note-icon-underline:before {
content:"\f125";
}
.note-icon-undo:before {
content:"\f126";
}
.note-icon-unorderedlist:before {
content:"\f127";
}
.note-icon-video:before {
content:"\f128";
}
</style>
</head>
<body>
<h1>summernote</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="align-center"><i class=" note-icon-align-center"></i> note-icon-align-center</div>
<div class="icons__item" data-name="align-indent"><i class=" note-icon-align-indent"></i> note-icon-align-indent</div>
<div class="icons__item" data-name="align-justify"><i class=" note-icon-align-justify"></i> note-icon-align-justify</div>
<div class="icons__item" data-name="align-left"><i class=" note-icon-align-left"></i> note-icon-align-left</div>
<div class="icons__item" data-name="align-outdent"><i class=" note-icon-align-outdent"></i> note-icon-align-outdent</div>
<div class="icons__item" data-name="align-right"><i class=" note-icon-align-right"></i> note-icon-align-right</div>
<div class="icons__item" data-name="align"><i class=" note-icon-align"></i> note-icon-align</div>
<div class="icons__item" data-name="arrows-alt"><i class=" note-icon-arrows-alt"></i> note-icon-arrows-alt</div>
<div class="icons__item" data-name="bold"><i class=" note-icon-bold"></i> note-icon-bold</div>
<div class="icons__item" data-name="caret"><i class=" note-icon-caret"></i> note-icon-caret</div>
<div class="icons__item" data-name="chain-broken"><i class=" note-icon-chain-broken"></i> note-icon-chain-broken</div>
<div class="icons__item" data-name="circle"><i class=" note-icon-circle"></i> note-icon-circle</div>
<div class="icons__item" data-name="close"><i class=" note-icon-close"></i> note-icon-close</div>
<div class="icons__item" data-name="code"><i class=" note-icon-code"></i> note-icon-code</div>
<div class="icons__item" data-name="eraser"><i class=" note-icon-eraser"></i> note-icon-eraser</div>
<div class="icons__item" data-name="font"><i class=" note-icon-font"></i> note-icon-font</div>
<div class="icons__item" data-name="frame"><i class=" note-icon-frame"></i> note-icon-frame</div>
<div class="icons__item" data-name="italic"><i class=" note-icon-italic"></i> note-icon-italic</div>
<div class="icons__item" data-name="link"><i class=" note-icon-link"></i> note-icon-link</div>
<div class="icons__item" data-name="magic"><i class=" note-icon-magic"></i> note-icon-magic</div>
<div class="icons__item" data-name="menu-check"><i class=" note-icon-menu-check"></i> note-icon-menu-check</div>
<div class="icons__item" data-name="minus"><i class=" note-icon-minus"></i> note-icon-minus</div>
<div class="icons__item" data-name="orderedlist"><i class=" note-icon-orderedlist"></i> note-icon-orderedlist</div>
<div class="icons__item" data-name="pencil"><i class=" note-icon-pencil"></i> note-icon-pencil</div>
<div class="icons__item" data-name="picture"><i class=" note-icon-picture"></i> note-icon-picture</div>
<div class="icons__item" data-name="question"><i class=" note-icon-question"></i> note-icon-question</div>
<div class="icons__item" data-name="redo"><i class=" note-icon-redo"></i> note-icon-redo</div>
<div class="icons__item" data-name="special-character"><i class=" note-icon-special-character"></i> note-icon-special-character</div>
<div class="icons__item" data-name="square"><i class=" note-icon-square"></i> note-icon-square</div>
<div class="icons__item" data-name="strikethrough"><i class=" note-icon-strikethrough"></i> note-icon-strikethrough</div>
<div class="icons__item" data-name="subscript"><i class=" note-icon-subscript"></i> note-icon-subscript</div>
<div class="icons__item" data-name="summernote"><i class=" note-icon-summernote"></i> note-icon-summernote</div>
<div class="icons__item" data-name="superscript"><i class=" note-icon-superscript"></i> note-icon-superscript</div>
<div class="icons__item" data-name="table"><i class=" note-icon-table"></i> note-icon-table</div>
<div class="icons__item" data-name="text-height"><i class=" note-icon-text-height"></i> note-icon-text-height</div>
<div class="icons__item" data-name="trash"><i class=" note-icon-trash"></i> note-icon-trash</div>
<div class="icons__item" data-name="underline"><i class=" note-icon-underline"></i> note-icon-underline</div>
<div class="icons__item" data-name="undo"><i class=" note-icon-undo"></i> note-icon-undo</div>
<div class="icons__item" data-name="unorderedlist"><i class=" note-icon-unorderedlist"></i> note-icon-unorderedlist</div>
<div class="icons__item" data-name="video"><i class=" note-icon-video"></i> note-icon-video</div>
</div>
<h1>Usage</h1>
<pre><code><i class="note-icon-<span id="name">name</span>"></i></code></pre>
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
<script>
(function() {
document.getElementById('icons').onclick = function(e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
}
})();
</script>
</body>
</html>