cirandas.net

ref: master

public/javascripts/tinymce/tests/manual/inline-toolbars.html


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Inline toolbars test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
	tinymce.init({
		selector: "textarea.tinymce",
		theme: "modern",
		plugins: [
			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template paste textcolor importcss"
		],
		content_css: "css/development.css",
		add_unload_trigger: false,
		toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",
		setup: function(ed) {
			ed.addContextToolbar('img', 'alignleft aligncenter alignright alignjustify | image remove');
		}
	});

	tinymce.init({
		selector: "div.tinymce",
		theme: "modern",
		inline: true,
		plugins: [
			"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
			"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
			"save table contextmenu directionality emoticons template paste textcolor importcss"
		],
		content_css: "css/development.css",
		add_unload_trigger: false,
		toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",
		setup: function(ed) {
			ed.addContextToolbar('img', 'alignleft aligncenter alignright alignjustify | image');
		}
	});

	function drawRect(rect, color) {
		var $elm = tinymce.$('#' + color);

		if (!$elm.length) {
			$elm = tinymce.$('<div id="' + color + '" class="rect hidden">').css('position', 'absolute').css('outline', '1px solid ' + color).appendTo(document.body);
		}

		if (!rect) {
			return;
		}

		$elm.css({
			left: rect.x,
			top: rect.y,
			width: rect.w,
			height: rect.h
		});
	}
	
	function toggleRects() {
		tinymce.$('div.rect').toggleClass('hidden');
	}
</script>
<style>
.rect {
	z-index: 9999999999;
}

.hidden {
	display: none;
}
</style>
</head>
<body>

<form method="post" action="http://www.tinymce.com/dump.php?example=true">
	<button type="button" onclick="toggleRects()">Toggle rects</button>
	<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce">
		<p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text<img src="../tinymce/ui/img/raster.gif" width="213" height="213" style="float: right"></p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p>
	</textarea>

	<div class="tinymce" style="overflow: auto; height: 300px; padding: 10px;">
		<p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p>text</p>
		<p><img src="../tinymce/ui/img/raster.gif" width="100" height="100">text<img src="../tinymce/ui/img/raster.gif" width="100" height="100" style="float: right"></p>
	</div>

	<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>

</body>
</html>