How to setup CodeMirrorHow to get value of CodeMirror text editor

How to get value of CodeMirror text editor

CodeMirror

← Prev

In this tutorial we will learn to get value of CodeMirror editor.

Requirement

  1. CodeMirror setup
  2. Localhost LAMP stack setup [using XAMPP if on Windows / MAMP if on Mac]
  3. Basic or no prior knowledge of PHP as we will be writing some php code
  4. jQuery

To download

CodeMirror: http://codemirror.net/

jQuery: https://jquery.com/

Optional

SublimeText: https://www.sublimetext.com/

Atom: https://atom.io/

Brackets: http://brackets.io/

eclipse: https://eclipse.org/

XAMPP for Windows: https://www.apachefriends.org/download.html

MAMP for Mac: https://www.mamp.info/en/

PHP | How to setup XAMPP and Zend Eclipse PDT for PHP project https://www.youtube.com/watch?v=Us5i6H0hLp8

Steps

Create form.php inside codemirror project folder.

Include the necessary files inside the form.php file.


<!DOCTYPE html>
<html>
	<head>
		<title>CodeMirror</title>
		<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">
	</head>
	<body>
		
		<!-- javascript -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
		<script type="text/javascript" src="js/default.js"></script>
	</body>
</html>

Create a form


<form id="preview-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
	<textarea class="codemirror-textarea" name="preview-form-comment" id="preview-form-comment"><?php echo $comment; ?></textarea>
	<br>
	<input type="submit" name="preview-form-submit" id="preview-form-submit" value="Submit">
</form>

Now we need to write some php code that will process the submitted form data.


<?php

//initially
$comment = null;

//if the form is submitted
if($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['preview-form-comment'])) {
	$comment = $_POST['preview-form-comment'];
}

?>

At this point our form.php file will contain the following code.


<?php

//initially
$comment = null;

//if the form is submitted
if($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['preview-form-comment'])) {
	$comment = $_POST['preview-form-comment'];
}

?>

<!DOCTYPE html>
<html>
	<head>
		<title>CodeMirror - Form</title>
		<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">
	</head>
	<body>
		<form id="preview-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
			<textarea class="codemirror-textarea" name="preview-form-comment" id="preview-form-comment"><?php echo $comment; ?></textarea>
			<br>
			<input type="submit" name="preview-form-submit" id="preview-form-submit" value="Submit">
		</form>
		<div id="preview-comment"><?php echo $comment; ?></div>

		<!-- javascript -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
		<script type="text/javascript" src="js/default.js"></script>
	</body>
</html>

To get the value of the CodeMirror text editor we need to write some javascript code in the default.js file.


$(document).ready(function(){
	//code here...
	var code = $(".codemirror-textarea")[0];
	var editor = CodeMirror.fromTextArea(code, {
		lineNumbers : true
	});

	//when form submitted
	$("#preview-form").submit(function(e){
		var value = editor.getValue();
		if(value.length == 0) {
			alert("Missing comment!");
		}
	});
});

So, in the above javascript code we are checking if the form "preview-form" is submitted then we take the value of the CodeMirror text editor using the getValue() function. Then we are checking whether the user has entered any text in the editor. If there is no value then we alert a message "Missing comment!".

← Prev