CodeMirror
In this tutorial we will learn to get value of CodeMirror editor.
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
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!".
ADVERTISEMENT