My word at me

    <style>
    .contents{
      width: 80%;
      height: 600px;
      margin: 50px 8px 8px 8px;
      padding: 8px;
      min-height: 60px;
      background-color: #fff;
      outline: none;
    }
    #toolbar{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      overflow-x: auto;
      content: "";
      display: table;
      width: max-content;
      overflow: hidden;
      border: 1px solid #ccc;
      color: #000;
      background-color: #f1f1f1;
      position: fixed;
      top: 0;
      z-index: 1;
      margin: 8px;
    }
    #bm i{
      top: -147px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #ul i{
      top: -84px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #ol i{
      top: -84px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #sup i{
      top: -126px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #sub i{
      top: -126px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #bold i{
      top: -1px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #italic i{
      top: -146px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #underline i{
      top: -21px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #strike i{
      top: -22px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #remove i{
      top: 0px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #link i{
      top: -166px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #image i{
      top: -167px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Center i{
      top: -42px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Full i{
      top: -42px;
      left: -0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Left i{
      top: -62px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #Right i{
      top: -62px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #undo i{
      top: -105px;
      left: 0px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #redo i{
      top: -105px;
      left: -21px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #video i{
      top: -187px;
      left: 60px;
      position: absolute;
      content: url(toolbarIconGoogle.png);
    }
    #fontName{
      height: 23px;
    }
    #fontName option{
      background-color: #fff;
    }
    .item-m-i{
      width: 21px;
      height: 21px;
    }
    .item-m{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      white-space: normal;
      margin: 4px;
      float: left;
      border: 1px solid rgba(0, 0, 0, 0);
      border-radius: 4px;
      display: block;
      vertical-align: middle;
      overflow: hidden;
      text-decoration: none;
      background-color: inherit;
      text-align: center;
      cursor: pointer;
      position: relative;
    }
    .item-m:hover{
      border: 1px solid #ccc;
    }
    .am{
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      background-color: inherit;
      border-radius: 4px;
      border: 1px solid rgba(0,0,0,0);
    }
    .am:hover {
      border: 1px solid #aaa;
    }
    .am:hover .aam{
      border-left: 1px solid #aaa;
    }
    .m{
      display: none;
      position: fixed;
      background-color: #fff;
      top: 30px;
      z-index: 1;
      margin: 0px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .aam{
      display: initial;
      border-left: 1px solid rgba(0,0,0,0);
    }
    input[type=color]{
      width: 60px;
    }
    .modal{
      background-color: white;
      height: 100px;
      width: 200px;
      position: fixed;
      z-index: 101;
      top: calc(50% - 50px);
      left: calc(50% - 100px);
      display: none;
    }
    #modal-bg{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background-color: rgba(0,0,0,0.5);
      z-index: 100;
      display: none;
    }
    </style>
  <div>
    <div id="toolbar">
      <a class="item-m item-m-i" id="undo"><i></i></a>
      <a class="item-m item-m-i" id="redo"><i></i></a>
      <div class="item-m item-m-i" id="bm"><i class="aam"></i>
        <div class="m" id="m">
          <div class="item-m" id="p">normal</div>
          <a class="item-m" id="h1">Titre1</a>
          <a class="item-m" id="h2">Titre2</a>
          <a class="item-m" id="h3">Titre3</a>
          <a class="item-m" id="h4">Titre4</a>
          <a class="item-m" id="h5">Titre5</a>
        </div>
      </div>
      <select class="item-m" id="fontName">
        <option value="Arial">Arial</option>
        <option value="Calibri">Calibri</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
      </select>
      <a class="item-m item-m-i" id="bold"><i></i></a>
      <a class="item-m item-m-i" id="italic"><i></i></a>
      <a class="item-m item-m-i" id="underline"><i></i></a>
      <a class="item-m item-m-i" id="strike"><i></i></a>
      <div class="item-m am" id="color">color
        <div class="aam" id="bm1">&#x25BE;
          <div class="m" id="m1">
            <input class="item-m aam" type="color" id="textcolor">
          </div>
        </div>
      </div>
      <div class="item-m am" id="bgColor">bgcolor
        <div class="aam" id="bm2">&#x25BE;
          <div class="m" id="m2">
            <input class="item-m aam" type="color" id="backgColor">
          </div>
        </div>
      </div>
      <a class="item-m item-m-i" id="Left"><i></i></a>
      <a class="item-m item-m-i" id="Center"><i></i></a>
      <a class="item-m item-m-i" id="Right"><i></i></a>
      <a class="item-m item-m-i" id="Full"><i></i></a>
      <a class="item-m item-m-i" id="ul"><i></i></a>
      <a class="item-m item-m-i" id="ol"><i></i></a>
      <a class="item-m item-m-i" id="sup"><i></i></a>
      <a class="item-m item-m-i" id="sub"><i></i></a>
      <a class="item-m item-m-i" id="remove"><i></i></a>
      <a class="item-m item-m-i" id="link"><i></i></a>
      <a class="item-m item-m-i" id="image"><i></i></a>
      <a class="item-m" style="width: 80px; text-align: left;" id="video">video &<i></i></a>
  </div>
  <div class="modal" id="modal-link"><div>Entre ton lien :</div><div id="url-m" contenteditable=true></div><button id="btn-link">valider</button></div>
  <div class="modal" id="modal-img"><div></div><button id="btn-img">valider</button></div>
  <div class="modal" id="modal-src"><div>Entre ton code :</div><div id="code-m" contenteditable=true></div><button id="btn-src">valider</button></div>
  <div id="modal-bg"></div>
  <div autofocus class="contents" contenteditable=true>ew ew fweafs d fdfdsaa sfdsadf<div align="center"><img src="http://chris.photobooks.com/tests/rte/moz_resizing/testImage.jpg" alt="Test Image" width="233" height="211"><img src="http://chris.photobooks.com/tests/rte/moz_resizing/testImage.jpg" alt="Test Image" width="234" height="211"> </div><div align="center" style="text-align: left;">asdfkasifjaskdfkosakdflaskfdlasdfas</div><div align="center" style="text-align: left;">&nbsp;fasdf</div><div align="center" style="text-align: left;">sadf asdf asldkfjhuygusidf aojsf asdf sahdfijohasidfh iashdhasiudfhaushdfuhasdfuihasiudfhuiashfiuhasdfa</div><div align="center" style="text-align: left;">sfasmdf nisadifhasidfasdfijasidfjashdf ijasidfjoiasjdfoiasdf</div><div align="center" style="text-align: left;">as dfAsdf nasjiodfhni asdfuias dfhasd fashdfafjas dfasd f</div><div align="center" style="text-align: left;">asdf&nbsp;</div><div align="center" style="text-align: left;">asdfasdfasdf asdfasdfasdfasdfasdf asdfasdfa sdgfa sdfasdfas df</div><div align="center" style="text-align: left;">asdfasdfasdbfu gasdfashdf asjhd ihasdijfhasidhfuashdioasfajsoijfasijfas</div></div></div>
  <script>
  var contadd;
  setInterval(function() {
    if (document.queryCommandValue('bold')=='false') {
      $("#bold").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#bold").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('italic')=='false') {
      $("#italic").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#italic").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('underline')=='false') {
      $("#underline").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#underline").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('StrikeThrough')=='false') {
      $("#strike").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#strike").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('InsertUnorderedList')=='false') {
      $("#ul").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#ul").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('InsertOrderedList')=='false') {
      $("#ol").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#ol").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('superscript')=='false') {
      $("#sup").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#sup").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('subscript')=='false') {
      $("#sub").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#sub").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyCenter')=='false') {
      $("#Center").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Center").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyFull')=='false') {
      $("#Full").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Full").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyLeft')=='false') {
      $("#Left").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Left").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    if (document.queryCommandValue('justifyRight')=='false') {
      $("#Right").css("border", "1px solid rgba(0, 0, 0, 0)").css("background-color", "inherit");
    }else {
      $("#Right").css("border", "1px solid #ccc").css("background-color", "#ccc");
    }
    $("#color").css("color", document.queryCommandValue ('ForeColor'));
    $("#bgColor").css("color", document.queryCommandValue ('backColor'));
  },100)
  var x = true;
  var mod = true;
  $('#link').click( function() {
    mod = false;
    $('#modal-link').show();
    $('#modal-bg').show();
  });
  $('#image').click( function() {
    mod = false;
    $('#modal-img').show();
    $('#modal-bg').show();
  });
  $('#video').click( function() {
    mod = false;
    $('#modal-src').show();
    $('#modal-bg').show();
  });
  $('.contents').focus();
  $('.contents').on('blur',function(){
    if (mod) {
      $('.contents').focus();
    }
  });
  $("body").click( function(e) {
    if (!$(e.target).hasClass("aam")) {
      $('.m').hide();
    }
  })
  $('#bm').children().click(function() {
    $('.m').hide();
    if (x) {
      document.getElementById('m').style.display = "grid";
      x = false;
    }else {
      $('#m').hide();
      x = true;
    }
  })
  $('#bm1').click(function() {
    $('.m').hide();
    $('#m1').toggle();
  })
  $('#bm2').click( function() {
    $('.m').hide();
    $('#m2').toggle();
  })
  $('#p').on('click', function() {
    methods.formatBlock.apply(this, ["<p>"]);
  })
  $('#h1').on('click', function() {
    methods.formatBlock.apply(this, ["<h1>"]);
  })
  $('#h2').on('click', function() {
    methods.formatBlock.apply(this, ["<h2>"]);
  })
  $('#h3').on('click', function() {
    methods.formatBlock.apply(this, ["<h3>"]);
  })
  $('#h4').on('click', function() {
    methods.formatBlock.apply(this, ["<h4>"]);
  })
  $('#h5').on('click', function() {
    methods.formatBlock.apply(this, ["<h5>"]);
  })
  $('#ul').on('click', function() {
    methods.unorderedList.apply(this);
  })
  $('#ol').on('click', function() {
    methods.orderedList.apply(this);
  })
  $('#sup').on('click', function() {
    methods.superscript.apply(this);
  })
  $('#sub').on('click', function() {
    methods.subscript.apply(this);
  })
  $('#bold').on('click', function() {
    methods.bold.apply(this);
  })
  $('#italic').on('click', function() {
    methods.italic.apply(this);
  })
  $('#underline').on('click', function() {
    methods.underline.apply(this);
  })
  $('#strike').on('click', function() {
    methods.strike.apply(this);
  })
  $('#remove').on('click', function() {
    methods.removeFormat.apply(this);
  })
  $('#btn-link').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.createLink.apply(this, [$('#url-m').html()]);
    $('#url-m').html("");
  })
  $('#btn-img').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.insertImage.apply(this, [$('#').html()]);
    $('#url-m').html("");
  })
  $('#btn-src').on('click', function() {
    mod = true;
    $('.contents').focus();
    $('.modal').hide();
    $('#modal-bg').hide();
    methods.insertVideo.apply(this, [$('#code-m').html()]);
    $('#code-m').html("");
  })
  $('#Center').on('click', function() {
    methods.justifyCenter.apply(this);
  })
  $('#Full').on('click', function() {
    methods.justifyFull.apply(this);
  })
  $('#Left').on('click', function() {
    methods.justifyLeft.apply(this);
  })
  $('#Right').on('click', function() {
    methods.justifyRight.apply(this);
  })
  $('#color').on('click', function() {
    methods.textcolor.apply(this, [$('#textcolor').val()])
  })
  $('#bgColor').on('click', function() {
    methods.backgColor.apply(this, [$('#backgColor').val()])
  })
  $('#undo').on('click', function() {
    methods.undo.apply(this)
  })
  $('#redo').on('click', function() {
    methods.redo.apply(this)
  })
  $('#textcolor').on('change', function(){
    methods.textcolor.apply(this, [$(this).val()]);
  })
  $('#backgColor').on('change', function(){
    methods.backgColor.apply(this, [$(this).val()]);
  })
  $('#fontName').on('change', function(){
    methods.fontName.apply(this, [$(this).val()]);
  })
  var methods = {
    bold: function() {
      document.execCommand("bold", false, null);
    },
    italic: function() {
      document.execCommand("italic", false, null);
    },
    underline: function() {
      document.execCommand("underline", false, null);
    },
    strike: function() {
      document.execCommand("StrikeThrough", false, null);
    },
    orderedList: function() {
      document.execCommand("InsertOrderedList", false, null);
    },
    unorderedList: function() {
      document.execCommand("InsertUnorderedList", false, null);
    },
    superscript: function() {
      document.execCommand("superscript", false, null);
    },
    subscript: function() {
      document.execCommand("subscript", false, null);
    },
    createLink: function(contadd) {
      document.execCommand("createLink", false, contadd);
    },
    insertImage: function(contadd) {
      document.execCommand("InsertImage", false, contadd);
    },
    insertVideo: function(contadd) {
      document.execCommand('insertHTML', false, contadd);
    },
    formatBlock: function(block) {
      document.execCommand("FormatBlock", null, block);
    },
    removeFormat: function() {
      document.execCommand("removeFormat", false, null);
    },
    textcolor: function(color) {
      document.execCommand("ForeColor", false, color);
    },
    backgColor: function(color) {
      document.execCommand("backColor", false, color);
    },
    justifyCenter: function() {
      document.execCommand("justifyCenter", false, null);
    },
    justifyFull: function() {
      document.execCommand("justifyFull", false, null);
    },
    justifyLeft: function() {
      document.execCommand("justifyLeft", false, null);
    },
    justifyRight: function() {
      document.execCommand("justifyRight", false, null);
    },
    undo: function() {
      document.execCommand("undo", false, null);
    },
    redo: function() {
      document.execCommand("redo", false, null);
    },
    fontName: function(font) {
      document.execCommand("fontName", false, font);
    }
  }
  document.execCommand("enableObjectResizing", false, true);
  // TODO: img redimention, orderedList...
  </script>