CKEditor ignores empty div

I have written a plugin that adds bootstrap grid into the editor.However it seems that CKEditor deletes the whole wrapping col div when there is not content inside it.

This is what is default inside the dom.When i delete the 'content', the editor removes the wrapping div-layout-column .

<div class="container-fluid layout-container">
  <div class="row  layout-row">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 layout-column">   
        <p>content</p>
     </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 layout-column">
       <p>content</p>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 layout-column">  
      <p>content</p>   
    </div>
 </div>

I read through this documentation and althought the div element is not stripped on default, i added

 config.protectedSource.push(/<div[^>]><\/div>/g);
 CKEDITOR.dtd.$removeEmpty['div'] = false;

inside the config.js.

http://ift.tt/1FognrU

I have thought about a workaround: to make a custom event when layout-column will be with no data and insert blank space to prevent the editor from removing it, but i was thinking if any event is fired when the editor removes the div.

I appreciate your help, thank you in advance!