angular-rich-text-editor
Version:
A lightweight, configurable rich-text editor component for Angular applications.
162 lines (160 loc) • 7.72 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>RichTextEditor Help</title>
<link href="richtexteditor_content.css" media="all" rel="stylesheet" type="text/css" />
<style>
thead {
background-color: #f7f7f7;
}
.itemicon {
float: left;
width: 32px;
height: 24px;
}
.itemtext {
float: left;
width: 100px;
}
.itemicon svg {
width: 24px;
height: 24px;
margin: 0 8px;
}
</style>
</head>
<body style="overflow:auto">
<h3>Shortcuts</h3>
<table class="table">
<thead>
<tr>
<th scope="col">Action</th>
<th scope="col">Description</th>
<th scope="col">Shortcut</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 001.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z" /></svg>
</div>
<div class='itemtext'>
Bold
</div>
</td>
<td>Bolds the selected text.</td>
<td>Ctrl + B</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M7.991 11.674L9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z" /></svg>
</div>
<div class='itemtext'>
Italic
</div>
</td>
<td>Italicizes the selected text.</td>
<td>Ctrl + I</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136z" /><path fill-rule="evenodd" d="M12.5 15h-9v-1h9v1z" clip-rule="evenodd" /></svg>
</div>
<div class='itemtext'>
Underline
</div>
</td>
<td>Underlines the selected text</td>
<td>Ctrl + U</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="0 0 32 32" fill="#5F6368"><path d="M5,5v1v1h1h1V6V5H6H5z M9,5v2h2V5H9z M13,5v2h2V5H13z M17,5v2h2V5H17z M21,5v2h2V5H21z M25,5v1v1h1h1V6V5h-1H25z M5,9v2h2V9H5z M25,9v2h2V9H25z M10,11v2h12v-2H10z M5,13v2h2v-2H5z M25,13v2h2v-2H25z M10,15v2h10v-2H10z M5,17v2h2v-2H5z M25,17v2h2v-2H25z M10,19v2h12v-2H10z M5,21v2h2v-2H5z M25,21v2h2v-2H25z M5,25v1v1h1h1v-1v-1H6H5z M9,25v2h2v-2H9z M13,25v2h2v-2H13z M17,25v2h2v-2H17z M21,25v2h2v-2H21z M25,25v1v1h1h1v-1v-1h-1H25z" /></svg>
</div>
<div class='itemtext'>
Select all
</div>
</td>
<td>Selects all content.</td>
<td>Ctrl + A</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 36 36" fill="#5F6368"><path d="M9,15c-2.5,0-4,1.5-4,4c0,2.5,1.5,4,4,4h5v2H9c-3.5,0-6-2.5-6-6c0-3.5,2.5-6,6-6h16.2l-4-4l1.4-1.5L29,14 l-6.4,6.4L21.2,19l4-4H9z" /></svg>
</div>
<div class='itemtext'>
Redo
</div>
</td>
<td>Reverses the last Undo.</td>
<td>Ctrl + Y</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 36 36" fill="#5F6368" style="width: 100%; height: 100%; margin: 0px; border: 0px; align-self: self-start;"><path d="M9,15c-2.5,0-4,1.5-4,4c0,2.5,1.5,4,4,4h5v2H9c-3.5,0-6-2.5-6-6c0-3.5,2.5-6,6-6h16.2l-4-4l1.4-1.5L29,14 l-6.4,6.4L21.2,19l4-4H9z"></path></svg> </div>
<div class='itemtext'>
Undo
</div>
</td>
<td>Reverses the last action.</td>
<td>Ctrl + Z</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 36 36" fill="#5F6368" style="width: 100%; height: 100%; margin: 0px; border: 0px; align-self: self-start;"><path d="M27.71,9.29l-5-5A1,1,0,0,0,22,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V10A1,1,0,0,0,27.71,9.29ZM12,6h8v4H12Zm8,20H12V18h8Zm2,0V18a2,2,0,0,0-2-2H12a2,2,0,0,0-2,2v8H6V6h4v4a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6.41l4,4V26Z"></path></svg>
</div>
<div class='itemtext'>
Save
</div>
</td>
<td>Saves the content.</td>
<td>Ctrl + S</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M10.707 3h-1l-3-3H1v13h4v3h10V7.293L10.707 3zM11 4.707L13.293 7H11V4.707zM2 12V1h4.293l2 2H5v9H2zm4 3V4h4v4h4v7H6z" /></svg>
</div>
<div class='itemtext'>
Copy
</div>
</td>
<td>Copies the current selection.</td>
<td>Ctrl + C</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path d="M13 6v-4h-4c0-1.103-.897-2-2-2s-2 .897-2 2h-4v13h6v1h8v-10h-2zm-7-3v-1c0-.551.449-1 1-1s1 .449 1 1v1h2v1h-6v-1h2zm-4 11v-11h1v2h8v-2h1v3h-5v8h-5zm12 1h-6v-8h6v8z" /></svg>
</div>
<div class='itemtext'>
Paste
</div>
</td>
<td>Pastes content from the clipboard into the current position.</td>
<td>Ctrl + V</td>
</tr>
<tr>
<td>
<div class='itemicon'>
<svg viewBox="-2 -2 20 20" fill="#5F6368"><path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd" /><path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd" /></svg>
</div>
<div class='itemtext'>
Find & Replace
</div>
</td>
<td>Finds and replaces the text in the editor's content.</td>
<td>Ctrl + F</td>
</tr>
</tbody>
</table>
</body>
</html>