<div class="conttext2" contenteditable >Text</div>

<div class="conttext" contenteditable >Text</div>

<a href="#" class="html">html</a>
<a href="#" class="link">link</a>
<a href="#" class="unlink">unlink</a>

<a href="#" class="full">full</a>
<a href="#" class="left">left</a>
<a href="#" class="right">right</a>
<a href="#" class="center">center</a>

<a href="#" class="italic">italic</a>
<a href="#" class="bold">bold</a>

<a href="#" class="image">image</a>

<a href="#" class="color_text">color_text</a>
<a href="#" class="color_back">color_back</a>

<a href="#" class="font_size">font_size</a>
<a href="#" class="font_type">font_type</a>
 <a href="#" class="strike">strike</a>

<a href="#" class="line">line</a>

<a href="#" class="under">under</a>

<a href="#" class="undo">undo</a>

.highlight {
    color:#888;
}

var doc = $('.conttext').get(0);

$(document).ready(function(){
    $('.html').click(function(){
        var highlight = window.getSelection();  
        document.execCommand('insertHTML', false, '<span style="color:green" >'+highlight+'</span>');
    });
});

$("body" ).on('click', ".link", function(e) {
  url = prompt('Введите адрес ссылки', 'http:\/\/');
  document.execCommand('createlink', false, url);
})

$("body" ).on('click', ".unlink", function(e) {
  document.execCommand('unlink', false);
})

$("body" ).on('click', ".center", function(e) {
  document.execCommand('justifyCenter', false);
})
$("body" ).on('click', ".full", function(e) {
  document.execCommand('justifyFull', false);
})
$("body" ).on('click', ".left", function(e) {
  document.execCommand('justifyLeft', false);
})
$("body" ).on('click', ".right", function(e) {
  document.execCommand('justifyRight', false);
})


$("body" ).on('click', ".italic", function(e) {
  document.execCommand('italic', false);
})
$("body" ).on('click', ".bold", function(e) {
  document.execCommand('bold', false);
})
 

$("body" ).on('click', ".image", function(e) {
  url = prompt('Введите адрес ссылки', 'http:\/\/');
  document.execCommand('insertImage', false, url);
})

$("body" ).on('click', ".color_text", function(e) {
  url = prompt('Введите цвет', '');
  document.execCommand('foreColor', false, url);
})

$("body" ).on('click', ".color_back", function(e) {
  url = prompt('Введите цвет', '');
  document.execCommand('backColor', false, url);
})

$("body" ).on('click', ".font_type", function(e) {
  url = prompt('Введите шрифт', '');
  document.execCommand('fontName', false, url);
})

$("body" ).on('click', ".font_size", function(e) {
  url = prompt('Введите размер шрифта', '');
  document.execCommand('fontSize', false, url);
})


$("body" ).on('click', ".line", function(e) {
  document.execCommand('insertHorizontalRule', false);
})

$("body" ).on('click', ".strike", function(e) {
  document.execCommand('strikeThrough', false);
})

$("body" ).on('click', ".under", function(e) {
  document.execCommand('underline', false);
})

$("body" ).on('click', ".undo", function(e) {
  document.execCommand('undo', false);
})