You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.2 KiB
HTML
108 lines
2.2 KiB
HTML
6 years ago
|
<!DOCTYPE html>
|
||
|
|
<!--
|
||
|
|
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
|
||
|
|
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||
|
|
-->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>TableResize Plugin dev sample</title>
|
||
|
|
<script src="../../../ckeditor.js"></script>
|
||
|
|
<link rel="stylesheet" href="../../../samples/old/sample.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 class="samples">
|
||
|
|
TableResize Plugin - dev sample
|
||
|
|
</h1>
|
||
|
|
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
||
|
|
<table style="width: 500px;" border="1">
|
||
|
|
<caption>
|
||
|
|
A sample table</caption>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Column 1</td>
|
||
|
|
<td>
|
||
|
|
Column 2</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
You can resize a table column.</td>
|
||
|
|
<td>
|
||
|
|
Hover your mouse over its border.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Watch the cursor change.</td>
|
||
|
|
<td>
|
||
|
|
Now click and drag to resize.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<div id="inline" contenteditable="true">
|
||
|
|
<table style="width: 500px;" border="1">
|
||
|
|
<caption>
|
||
|
|
A sample table</caption>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Column 1</td>
|
||
|
|
<td>
|
||
|
|
Column 2</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
You can resize a table column.</td>
|
||
|
|
<td>
|
||
|
|
Hover your mouse over its border.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Watch the cursor change.</td>
|
||
|
|
<td>
|
||
|
|
Now click and drag to resize.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<table style="width: 500px;" border="1">
|
||
|
|
<caption>
|
||
|
|
A sample table</caption>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Column 1</td>
|
||
|
|
<td>
|
||
|
|
Column 2</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
You can resize a table column.</td>
|
||
|
|
<td>
|
||
|
|
Hover your mouse over its border.</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
Watch the cursor change.</td>
|
||
|
|
<td>
|
||
|
|
Now click and drag to resize.</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<script>
|
||
|
|
CKEDITOR.disableAutoInline = true;
|
||
|
|
|
||
|
|
CKEDITOR.replace( 'editor1', {
|
||
|
|
extraPlugins: 'tableresize'
|
||
|
|
} );
|
||
|
|
|
||
|
|
CKEDITOR.inline( 'inline', {
|
||
|
|
extraPlugins: 'tableresize'
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|