froala-editor
Version:
A beautiful Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.
89 lines (79 loc) • 2.92 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/froala_editor.css">
<link rel="stylesheet" href="../../css/froala_style.css">
<link rel="stylesheet" href="../../css/plugins/table.css">
<style>
body {
text-align: center;
}
section {
width: 81%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<section id="editor">
<div id='edit' style="margin-top: 30px;">
<h1>Resize Table</h1>
<p>The <code>table.min.js</code> plugin also offers the possibility to resize a table in the WYSIWYG HTML editor.</p>
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
</tr>
<tr>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
<td style="width: 25%;">
<br>
</td>
</tr>
</tbody>
</table>
<p>There are 2 options that can be used to customize the way table resize works:</p>
<ul>
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizerOffset" title="tableResizerOffset option" target="_blank">tableResizerOffset</a> - The distance in pixels from the table cell's left or right border at which to show the resizer.</li>
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableResizingLimit" title="tableResizingLimit option" target="_blank">tableResizingLimit</a> - The minimum width in pixels of a table cell allowed while resizing. The resizer cannot be dragged over this limit.</li>
</ul>
</div>
</section>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
<script type="text/javascript" src="../../js/plugins/link.min.js"></script>
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
<script>
$(function(){
$('#edit').froalaEditor({
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'table', '|', 'undo', 'redo'],
tableResizerOffset: 10,
tableResizingLimit: 50
})
});
</script>
</body>
</html>