cirandas.net

ref: master

public/javascripts/tinymce/tests/manual/imagetools.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
<!DOCTYPE html>
<html>
<head>
<title>Imagetools plugin test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script src="../../js/tinymce/plugins/imagetools/plugin.dev.js"></script>
<!-- <link rel="stylesheet" href="../../js/tinymce/skins/lightgray/skin.min.css"> -->
<script>
	tinymce.init({
		//imagetools_cors_hosts: ["moxiecode.cachefly.net"],
		//imagetools_proxy: "proxy.php",

		//images_upload_url: 'postAcceptor.php',
		//images_upload_base_path: 'base/path',
		//images_upload_credentials: true,

		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 colorpicker imagetools"
		],
		content_css: "css/development.css",
		add_unload_trigger: false,
		height: 600,
		toolbar1: "undo redo | styleselect | alignleft aligncenter alignright alignjustify | link image | media | emoticons",
		images_upload_handler: function(data, success, failure) {
			console.log('blob upload [started]', data.id());

			setTimeout(function() {
				console.log('blob upload [ended]', data.id());
				success(data.id() + '.png');
			}, 1000);
		}
	});

	function send() {
		tinymce.activeEditor.uploadImages(function(success) {
			document.forms[0].submit();
		});
	}

	function upload() {
		console.log('upload [started]');

		tinymce.activeEditor.uploadImages(function(success) {
			console.log('upload [ended]', success);
		});
	}

	function dump() {
		var content = tinymce.activeEditor.getContent();

		tinymce.$('#view').html(content);
		console.log(content);
	}
</script>
</head>
<body>

<form method="post" action="http://www.tinymce.com/dump.php?example=true">
	<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 80%" class="tinymce">
		<p>
			<img src="img/dogleft.jpg" width="160" height="100">
			<img src="img/dogleft.jpg" style="width: 160px; height: 100px">
			<img src="img/dogleft.jpg" style="width: 20%">
			<img src="img/dogleft.jpg">
			<img src="http://moxiecode.cachefly.net/tinymce/v9/images/logo.png">
		</p>
	</textarea>

	<input type="button" value="Submit" onclick="send()" />
	<input type="button" value="Dump" onclick="dump()" />
	<input type="button" value="Upload" onclick="upload()" />
</form>

<div id="view"></div>
	
</body>
</html>