ckEdito in tabs with Vuejs

by moezmm

HTML

<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<div id="app">
<el-tabs type="border-card">
  <el-tab-pane   id="tab-1" label="Route">
    <h3>This is Panel 1</h3>
    <textarea name="pan1_editor1" id="pan1_editor1" contenteditable="true"></textarea>
    <textarea id="pan1_editor2" contenteditable="true"></textarea> 
  </el-tab-pane>
  <el-tab-pane id="tab-0"  label="Config">
      <h3>This is Panel 2</h3>
      <textarea id="pan2_editor1" contenteditable="true"></textarea>
      <textarea id="pan2_editor2" contenteditable="true"></textarea>
  </el-tab-pane>
</el-tabs>
</div>

<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

new Vue().$mount('#app');
CKEDITOR.replace('pan1_editor1');
CKEDITOR.replace('pan1_editor2');
CKEDITOR.replace('pan2_editor1');
CKEDITOR.replace('pan2_editor2');