1#@!#!123s

22527 1#@!#!123s
: / home / parchhayin / www / admin / tinymce / tests / manual /
Filename : ui_container.html
back
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test for container setting</title>
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script src="../../js/tinymce/plugins/table/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/paste/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/spellchecker/plugin.dev.js"></script>
<script type="text/javascript">
	tinymce.init({
		selector: 'textarea',
		width: 600,
		height: 150,
		ui_container: '.content',
		plugins: 'code link',
		toolbar: 'code link'
	});
</script>
<style media="screen">
.scrollable {
	margin: 20px;
	padding: 20px;
	background: #eee;
	overflow-y: scroll;
	height: 400px;
}

.content {
	height: 1000px;
	background: #ccc;
	padding: 20px;
	margin: 20px;
	position: relative;
}

.content .mce-floatpanel {
	outline: 1px solid red;
}
</style>
</head>
<body>
	<p>Use the 'container' setting to contain tinymce and toolbar menus inside a specific container specified by a selector.</p>
	<p>This allows the use of tinymce inside a scrollable area whereas before scrolling while having a toolbar menu open, the menu would always be positioned in relation to 'body'.</p>
	<p>Note: Requires that the container element you define has position:relative</p>
	<div class="scrollable">
		scrollable
		<div class="content">
			content
			<textarea></textarea>
		</div>
	</div>
</body>
</html>