ckEditor in Tabs with bootstrap

by moezmm

HTML

<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="active">
      <a href="#firstPanel" role="tab" data-toggle="tab">
              Panel 1
      </a>
    </li>
    <li>
      <a href="#secondPanel" role="tab" data-toggle="tab">
          Panel 2
      </a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active in" id="firstPanel">
      <h3>This is Panel 1</h3>
      <textarea id="pan1_editor1" contenteditable="true" style="bgcolor: red; border-color:black"></textarea>
      <textarea id="pan1_editor2" contenteditable="true" style="bgcolor: blue; border-color:black"></textarea> 
    </div>
    <div class="tab-pane" id="secondPanel">
      <h3>This is Panel 2</h3>
      <textarea id="pan2_editor1" contenteditable="true" style="bgcolor: red; border-color:black"></textarea>
      <textarea id="pan2_editor2" contenteditable="true" style="bgcolor: blue; border-color:black"></textarea>
    </div>
  </div>
</div>

CSS

.cke_contents{
  border:solid 1px #696969;
  background-color:blue;
  }
  
div[contenteditable] {
    outline: 1px solid blue;
}

JavaScript

CKEDITOR.editorConfig = function( config ) {
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};
CKEDITOR.inline('pan1_editor1');
CKEDITOR.inline('pan1_editor2');
CKEDITOR.inline('pan2_editor1');
CKEDITOR.inline('pan2_editor2');