88 lines
3.3 KiB
HTML
88 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Resize logic manual tests</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<script src="../js/tinymce/tinymce.dev.js"></script>
|
|
<script>
|
|
tinymce.init({
|
|
selector : "textarea",
|
|
add_unload_trigger: false,
|
|
content_css: 'css/development.css',
|
|
init_instance_callback: function(ed) {
|
|
ed.on('NodeChange', function() {
|
|
tinymce.DOM.setHTML('dump', tinymce.DOM.encode(ed.getContent()));
|
|
});
|
|
|
|
ed.on('ObjectResized', function(e) {
|
|
if (window.console) {
|
|
console.log(e.type, e.target, e.width, e.height);
|
|
}
|
|
});
|
|
},
|
|
content_style: 'div {margin: 10px; border: 5px solid red; padding: 3px}'
|
|
});
|
|
|
|
function select(selector, idx) {
|
|
tinymce.activeEditor.selection.select(tinymce.activeEditor.dom.select(selector)[idx]);
|
|
}
|
|
</script>
|
|
<style>
|
|
.mce-tinymce .mce-iframe {
|
|
height: 600px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<textarea style="width: 100%; height: 700px;">
|
|
<h3>Images</h3>
|
|
<h4>Auto size</h4>
|
|
<img src="../../examples/media/logo.jpg" />
|
|
<h4>Style size</h4>
|
|
<img src="../../examples/media/logo.jpg" style="width: 100px; height: 100px" />
|
|
<h4>Attr size</h4>
|
|
<img src="../../examples/media/logo.jpg" width="100" height="100" />
|
|
<h4>Mixed attr/style size</h4>
|
|
<img src="../../examples/media/logo.jpg" width="100" style="height:100px" />
|
|
<h4>Margin and border</h4>
|
|
<img src="../../examples/media/logo.jpg" style="margin: 10px; border: 5px solid red" />
|
|
<h4>Margin and border in div</h4>
|
|
<div><img src="../../examples/media/logo.jpg" style="margin: 10px; border: 5px solid red" /></div>
|
|
<h4>Float right</h4>
|
|
<img src="../../examples/media/logo.jpg" style="float: right" />
|
|
|
|
<h3>Tables</h3>
|
|
<h4>Auto size</h4>
|
|
<table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Style size</h4>
|
|
<table style="width: 100px; height: 100px"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Attr size</h4>
|
|
<table width="100" height="100"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Mixed attr/style size</h4>
|
|
<table width="100" style="height:100px"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Margin and border</h4>
|
|
<table style="margin: 10px; border: 5px solid red"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Table with image inside</h4>
|
|
<table><tr><td>1</td><td>2</td></tr><tr><td><img src="../../examples/media/logo.jpg" style="margin: 10px; border: 5px solid red" /></td><td>4</td></tr></table>
|
|
<h4>Float right</h4>
|
|
<table style="float: right"><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
<h4>Table in table</h4>
|
|
<table><tr><td><table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table></td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
|
|
|
|
<h3>Other objects</h3>
|
|
<h4>Auto size</h4>
|
|
<object></object>
|
|
<h4>Style size</h4>
|
|
<object style="width: 100px; height: 100px"></object>
|
|
<h4>Attr size</h4>
|
|
<object width="100" height="100"></object>
|
|
<h4>Mixed attr/style size</h4>
|
|
<object width="100" style="height:100px"></object>
|
|
<h4>Edge case on IE</h4>
|
|
<div style="width: 100px; height: 100px; border: 1px solid red">DIV</div>
|
|
</textarea>
|
|
<a href="#" onclick="select('img', 0);">[Select image 1]</a> <a href="#" onclick="select('img', 1);">[Select image 2]</a>
|
|
<pre id="dump" style="height: 300px; overflow: auto">
|
|
</pre>
|
|
</body>
|
|
</html> |