<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">In this example, we'll show you how to enable settings for container</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({
containerSettingEnabled: true,
containerSettingInitFunction: function (form, keditor) {
// Add control for settings form
form.append(
'<div class="form-horizontal">' +
' <div class="form-group">' +
' <div class="col-sm-12">' +
' <label>Background color</label>' +
' <input type="text" class="form-control txt-bg-color" />' +
' </div>' +
' </div>' +
'</div>'
);
// Add event handle for background color textbox
form.find('.txt-bg-color').on('change', function () {
// Get current setting container
var container = keditor.getSettingContainer();
// Find '.row' for setting background color
// Note: Make sure you have a div for setting background color
var row = container.find('.row');
if (container.hasClass('keditor-sub-container')) {
// Do nothing
} else {
row = row.filter(function () {
return $(this).parents('.keditor-container').length === 1;
});
}
// Set background color with value of textbox
row.css('background-color', this.value);
});
},
containerSettingShowFunction: function (form, container, keditor) {
// Find '.row' div
// Note: Make sure you have a div for setting background color
var row = container.find('.row');
// User "prop()" method to get properties of HTML element
var backgroundColor = row.prop('style').backgroundColor || '';
// User 'backgroundColor' for value of background color textbox
form.find('.txt-bg-color').val(backgroundColor);
},
containerSettingHideFunction: function (form, keditor) {
// Clean value of background color textbox when hiding settings form
form.find('.txt-bg-color').val('');
}
});
}); 