{% layout 'layout' %}
{% block title %}CKEditor{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Advanced Forms</a></li>
<li class="active"><a href="form-ckeditor.html">CKEditor</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
<script>
	//Fix since CKEditor can't seem to find it's own relative basepath
	CKEDITOR_BASEPATH  =  "assets/plugins/form-ckeditor/";
</script>
{{ "plugins/form-ckeditor/ckeditor.js" | asset_url | script_tag }}  	<!-- CKEditor -->
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xs-12">
    	<div class="panel panel-magenta">
	        <div class="panel-heading">
	            <h2>CKEditor</h2>
	        </div>
	        <div class="panel-body collapse in">

	            <div class="col-12">
	                <textarea name="ckeditor" id="" cols="80" rows="20" class="ckeditor"></textarea>
	            </div>

	        </div>
	    </div>
    </div>

    <div class="col-xs-12">
	    <div class="panel panel-magenta">
	        <div class="panel-heading">
	            <h2>Inline Editor</h2>
	        </div>
	        <div class="panel-body collapse in">
	            <div class="row">
	                <div class="col-md-12" contenteditable="true">
	                    <h3>Inline Editor</h3>
	                    <p>Make an editor out of anything! Just click anywhere and start editing!</p>
	                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nobis laboriosam repellat ipsum deserunt voluptate eos praesentium atque eligendi libero. Nam, id, eligendi natus facilis ullam pariatur numquam amet illum repudiandae ex porro labore in perferendis vero nobis iure ratione? Repudiandae, vel, quo, dolores velit vero debitis sed non odio culpa quasi excepturi tempore saepe atque quod repellendus aliquam eum neque dolorem beatae veniam quis id deserunt dignissimos voluptatum incidunt necessitatibus inventore reprehenderit consequatur esse perferendis ipsum earum pariatur et eaque sequi a harum sit similique itaque dicta expedita unde. Animi, quo, facilis laudantium quas commodi aut harum reprehenderit explicabo.</p>
	                </div>
	            </div>
	        </div>
	    </div>
    </div>
</div>
{% endblock %}
