1
This commit is contained in:
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE 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;
|
||||
}
|
||||
|
||||
.class1 {
|
||||
text-align: center;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Table Cell Style</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin it is possible to add custom style on the selected table cell inside the
|
||||
WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.</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>You can define your own table cell styles using the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableCellStyles"
|
||||
title="tableCellStyles">tableCellStyles</a> option. This option is an Object where the key represents the
|
||||
class name and its value is the style name that appears in the dropdown list. It is important to have unique
|
||||
keys otherwise they will not work properly.</p>
|
||||
<p>By default you can select multiple table cell styles at a time. If you want to toggle them and allow only one
|
||||
style to be selected at a time use the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableCellMultipleStyles"
|
||||
title="tableCellMultipleStyles">tableCellMultipleStyles</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
|
||||
// Define new table cell styles.
|
||||
tableCellStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE 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>Table Insert Helper</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin also offers a tool that allows you to insert rows and columns easier, just
|
||||
by going to the endge of the table.</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 are related to the table insert helper works:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableInsertHelper"
|
||||
title="tableInsertHelper option" target="_blank">tableInsertHelper</a> - This option can be used to disable
|
||||
the table insert helper.</li>
|
||||
<li><a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableInsertHelperOffset"
|
||||
title="tableInsertHelperOffset option" target="_blank">tableInsertHelperOffset</a> - The distance in pixels
|
||||
from the table border at which to show the insert helper.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
tableInsertHelperOffset: 25
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css">
|
||||
<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">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/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>Nested Tables</h1>
|
||||
|
||||
<p>In this example you can test advanced actions on nested tables.</p>
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 25%;">row 1, col 1</td>
|
||||
<td style="width: 25%;">
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td style="width: 50%;">t2, row 1, col 1</td>
|
||||
<td style="width: 50%;">t2, row 1, col 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>t2, row 2, col 1</td>
|
||||
<td>t2, row 2, col 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>t2, row 3, col 1</td>
|
||||
<td>t2, row 3, col 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td style="width: 25%;">row 1, col 3</td>
|
||||
<td style="width: 25%;">row 1, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2, col 1</td>
|
||||
<td>row 2, col 2</td>
|
||||
<td>row 2, col 3</td>
|
||||
<td>row 2, col 4</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<th style="width: 25%;">h1</th>
|
||||
<th style="width: 25%;">h2</th>
|
||||
<th style="width: 25%;">h3</th>
|
||||
<th style="width: 25%;">h4</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 1, col 1</td>
|
||||
<td>row 1, col 2</td>
|
||||
<td>row 1, col 3</td>
|
||||
<td>row 1, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 2, col 1</td>
|
||||
<td>row 2, col 2</td>
|
||||
<td>row 2, col 3</td>
|
||||
<td>row 2, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 3, col 1</td>
|
||||
<td>row 3, col 2</td>
|
||||
<td>row 3, col 3</td>
|
||||
<td>row 3, col 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row 4, col 1</td>
|
||||
<td>row 4, col 2</td>
|
||||
<td>row 4, col 3</td>
|
||||
<td>row 4, col 4</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<br />
|
||||
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<td rowspan="2" style="width: 9.0909%;">a</td>
|
||||
<td style="width: 9.0909%;">b</td>
|
||||
<td style="width: 9.0909%;">c</td>
|
||||
<td style="width: 9.0909%;">d</td>
|
||||
<td style="width: 9.0909%;">e</td>
|
||||
<td style="width: 9.0909%;">f</td>
|
||||
<td style="width: 9.0909%;">g</td>
|
||||
<td style="width: 9.0909%;">h</td>
|
||||
<td style="width: 9.0909%;">i</td>
|
||||
<td rowspan="3" style="width: 9.0909%;">j</td>
|
||||
<td style="width: 9.0909%;">k</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">l</td>
|
||||
<td colspan="2">m</td>
|
||||
<td>n</td>
|
||||
<td>o</td>
|
||||
<td>p</td>
|
||||
<td rowspan="2" colspan="2">q</td>
|
||||
<td>r</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>s</td>
|
||||
<td>t</td>
|
||||
<td colspan="2">u</td>
|
||||
<td>v</td>
|
||||
<td>w</td>
|
||||
<td>x</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>z</td>
|
||||
<td>za</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>zb</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>zc</td>
|
||||
<td>zd</td>
|
||||
<td>ze</td>
|
||||
<td>zf</td>
|
||||
<td colspan="2">zg</td>
|
||||
<td>zh</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript" src="../../js/froala_editor.min.js"></script>
|
||||
<script type="text/javascript" src="../../js/plugins/table.min.js"></script>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
new FroalaEditor("#edit")
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE 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="../../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 () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
tableResizerOffset: 10,
|
||||
tableResizingLimit: 50
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE 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;
|
||||
}
|
||||
|
||||
.class1 tbody tr:nth-child(2n) {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.class2 thead tr th,
|
||||
.class2 tbody tr td {
|
||||
border-style: dashed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="editor">
|
||||
<div id='edit' style="margin-top: 30px;">
|
||||
<h1>Table Style</h1>
|
||||
|
||||
<p>The <code>table.min.js</code> plugin it is possible to add custom style on the selected table inside the
|
||||
WYSIWYG HTML editor.also offers the possibility to resize a table in the WYSIWYG HTML editor.</p>
|
||||
|
||||
<p>The classes should be defined in CSS, otherwise no changes will be visible on the table's appearance.</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>You can define your own table styles using the <a
|
||||
href="http://www.froala.dev/wysiwyg-editor/docs/options#tableStyles" title="tableStyles">tableStyles</a>
|
||||
option. This option is an Object where the key represents the class name and its value is the style name that
|
||||
appears in the dropdown list. It is important to have unique keys otherwise they will not work properly.</p>
|
||||
<p>By default you can select multiple table styles at a time. If you want to toggle them and allow only one style
|
||||
to be selected at a time use the <a href="http://www.froala.dev/wysiwyg-editor/docs/options#tableMultipleStyles"
|
||||
title="tableMultipleStyles">tableMultipleStyles</a> option.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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 () {
|
||||
new FroalaEditor("#edit", {
|
||||
toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'table'], ['undo', 'redo'] ],
|
||||
|
||||
// Define new table cell styles.
|
||||
tableStyles: {
|
||||
class1: 'Class 1',
|
||||
class2: 'Class 2'
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user