Insert data on a button click to ckeditor

Question

I have to make a textarea editable with ckeditor. A button is placed after the editor. If that button is clicked, I need to add an html code to the editor. The code to load CK Editor is:

CKEDITOR.replace('mail_content');
CKEDITOR.config.toolbar = [
                ['Styles','Format','Font','FontSize'],
                // '/',
                ['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
                // '/',
                ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['Flash','TextColor','BGColor']
            ] ;

The button is

<button name="edit" id="edit" >edit</button>

Answer 1

I don't fully understand what you need but if you need example look at this

<textarea name="mail_content" id="mail_content" rows="10" cols="80">
  This is a test
</textarea>
<button name="edit" id="edit" >edit</button>
<script>
$('#edit').click(function(){
  CKEDITOR.editorConfig = function (config) {
      config.language = 'es';
      config.uiColor = '#F7B42C';
      config.height = 300;
      config.toolbarCanCollapse = true;
            config.toolbar = [
                ['Styles','Format','Font','FontSize'],
                // '/',
                ['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
                // '/',
                ['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                ['Flash','TextColor','BGColor']
            ] ;

  };
  CKEDITOR.replace('mail_content');
});
</script>

https://jsfiddle.net/reoh7j74/527