<div id="content-area">
<section>
<div class="container">
<div class="row">
<div class="col-sm-6" data-type="container-content">
<section data-type="component-text">
<div class="page-header">
<h1><b class="text-uppercase">Welcome to KEditor</b>
</h1>
<p class="lead">
<em>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</em>
</p>
</div>
</section>
</div>
<div class="col-sm-6" data-type="container-content">
<section data-type="component-photo">
<div class="photo-panel">
<img src="snippets/img/somewhere_bangladesh.jpg" style="display: inline-block;" height="" width="100%">
</div>
</section>
</div>
</div>
</div>
</section>
</div> $(function () {
$('#content-area').keditor({
extraTopbarItems: {
pageSetting: {
html: '<a href="javascript:void(0);" class="btn-page-setting" data-extra-setting="pageSetting"><i class="fa fa-fw fa-cog"></i></a>'
}
},
extraSettings: {
pageSetting: {
title: 'Page Settings',
trigger: '.btn-page-setting',
settingInitFunction: function (form, keditor) {
form.append('<div>This is content of page settings.</div><hr />');
},
settingShowFunction: function (form, container, keditor) {
form.append('<p>This content is added when showing setting</p><br />');
}
}
}
});
}); 