Blame view

frontend/web/js/validation/demo/tinymce4/index.html 1.81 KB
18b850c7   Administrator   Importers CRUD
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
  <!doctype html>
  <html lang="en">
  <head>
  	<meta charset="utf-8">
  	<title>jQuery Validation plugin: integration with TinyMCE</title>
  	<script src="../../lib/jquery.js"></script>
  	<script src="../../dist/jquery.validate.js"></script>
  	<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
  	<script>
  	tinymce.init({
  		mode: "textareas",
  
  		setup: function(editor) {
  			editor.on('change', function(e) {
  				tinymce.triggerSave();
  				$("#" + editor.id).valid();
  			});
  		}
  
  	});
  	$(function() {
  		var validator = $("#myform").submit(function() {
  			// update underlying textarea before submit validation
  			tinyMCE.triggerSave();
  		}).validate({
  			ignore: "",
  			rules: {
  				title: "required",
  				content: "required"
  			},
  			errorPlacement: function(label, element) {
  				// position error label after generated textarea
  				if (element.is("textarea")) {
  					label.insertAfter(element.next());
  				} else {
  					label.insertAfter(element)
  				}
  			}
  		});
  		validator.focusInvalid = function() {
  			// put focus on tinymce on submit validation
  			if (this.settings.focusInvalid) {
  				try {
  					var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
  					if (toFocus.is("textarea")) {
  						tinyMCE.get(toFocus.attr("id")).focus();
  					} else {
  						toFocus.filter(":visible").focus();
  					}
  				} catch (e) {
  					// ignore IE throwing errors when focusing hidden elements
  				}
  			}
  		}
  	})
  	</script>
  	<!-- /TinyMCE -->
  </head>
  <body>
  <form id="myform" action="">
  	<h3>TinyMCE4 and Validation Plugin integration example</h3>
  	<label>Some other field</label>
  	<input name="title">
  	<br>
  	<label>Some richt text</label>
  	<textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
  	<br>
  	<input type="submit" name="save" value="Submit">
  </form>
  </body>
  </html>