Froala Editor changing textarea content

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/css/froala_style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/js/froala_editor.min.js"></script>
<label for="froala-editor">Editor Label</label><br>
<label for="froala-editor" id="froala-label">Editor Label with Click Handler</label>
<textarea name="froala-editor" id="froala-editor">Foobar</textarea>
<button id="change-content">Change Content</button>

JavaScript

$('#froala-editor').froalaEditor();
$('#froala-label').on('click', function(){
	$('#froala-editor').froalaEditor('events.focus');
});
$('#change-content').on('click', function(){
	$('#froala-editor').val('<p>Foobaz</p>');
});