Wysihtml

by Greggg

HTML

<script src="//cdn.rawgit.com/Voog/wysihtml/master/dist/wysihtml-toolbar.js"></script>
<script src="//cdn.rawgit.com/Voog/wysihtml/master/parser_rules/advanced_and_extended.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.0/css/uikit.min.css">
<div class="editable">
    <div id="toolbar" class="toolbar">
        <div class="block">
            <div class="uk-button-group">
                <div class="uk-button-dropdown" data-uk-dropdown="">
                    <button class="uk-button ike ike-text"></button>
                    <div class="uk-dropdown uk-dropdown-small uk-dropdown-bottom">
                        <ul class="uk-nav uk-nav-dropdown">
                            <li><a class="uk-button" data-wysihtml5-command="bold" title="CTRL+B" href="javascript:;" unselectable="on"><i class="uk-icon-bold"></i></a></li>
                            <li><a class="uk-button" data-wysihtml5-command="italic" title="CTRL+I" href="javascript:;" unselectable="on"><i class="uk-icon-italic"></i></a></li>
                            <li><a class="uk-button" data-wysihtml5-command="strikethrough" title="CTRL+U" href="javascript:;" unselectable="on"><i class="uk-icon-strikethrough"></i></a></li>
                            <li><a class="uk-button" data-wysihtml5-command="underline" title="CTRL+U" href="javascript:;" unselectable="on"><i class="uk-icon-underline"></i></a></li>
                            <li><a class="uk-button" data-wysihtml5-command="superscript" title="Sup"><i class="uk-icon-superscript"></i></a></li>
                            <li><a class="uk-button" data-wysihtml5-command="subscript" title="Sub"><i class="uk-icon-subscript"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="uk-button-dropdown" data-uk-dropdown="">
                    <button...

CSS

.ike {
    background: #CCCCCC url(http://cms.ipaoo.fr/Tools/file_direct_link.html?node_id=2738218) no-repeat;
    width: 34px;
    height: 34px;
}

.ike-text {background-position: 0 0;}
.ike-font-familly {background-position: -34px 0;}
.ike-font-size {background-position: -68px 0;}
.ike-color {background-position: -102px 0;}
.ike-style {background-position: -170px 0;}




.blue {
    color: blue
}

.wysihtml5-editor {
    outline: 1px solid #0099FF;
    outline-offset: 10px;
    margin: 20px;
}

/* UIKIT STYLES OVERRIDE */
.uk-dropdown {
    width: auto !important;
}
.uk-dropdown-small {
    min-width: 50px;
}


/* COLOR STYLES */
.uk-color-set {
    font-size: 0;
    line-height: 0
}
.uk-color-set > * {
    display: inline-block;
    width: 32px;
    height: 32px;
    position: relative;
    z-index: 1;
}
.uk-color-set > *:hover {
    cursor: pointer;
    outline: 1px solid #000;
    outline-offset: -1px;
    z-index:2
}
.uk-color-set > *.uk-selected-color::after {
    color: #ffffff;
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 13px;
    font-weight: 400;
    line-height: 32px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: center;
    cursor: default;
}
.uk-color-set > * > i {
    text-align: center;
    line-height: 32px;
    height: 32px;
    width: 32px;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    cursor: default;
    left: 0;
}

code {
    background: #ddd;
    padding: 10px;
    white-space: pre;
    display: block;
    margin: 1em 0;
}


/* TABLE STYLE */
.wysihtml5-editor table {
    width: 100%;
    border-collapse: collapse;
}
.wysihtml5-editor table th, .wysihtml5-editor table td {
    padding: 5px;
    vertical-align: middle;
    border: 1px solid #ddd;
}
.wysihtml5-editor table td.wysiwyg-tmp-selected-cell, .wysihtml5-editor table th.wysiwyg-tmp-selected-cell {
    border: 1px double #1e88e5;
}

#tableSelectionGrid {
    line-height:0;
}
.ce11{
    width:...

JavaScript

var editor = new wysihtml5.Editor(document.getElementById('editor'), {
    toolbar:document.getElementById('toolbar'),
    parserRules:  wysihtml5ParserRules
}), composer=editor.composer;

editor.on("interaction", function() {
  if (composer.commands.state('foreColorStyle')) {
    var value = composer.commands.stateValue('foreColorStyle');
    $('.uk-text-color .uk-selected-color').removeClass('uk-selected-color');
    if (value) {
      $('.uk-text-color > [data-wysihtml5-command-value="'+ value +'"]').addClass('uk-selected-color');
    }
  }
  if (composer.commands.state('bgColorStyle')) {
    var value = composer.commands.stateValue('bgColorStyle');
    $('.uk-background-color .uk-selected-color').removeClass('uk-selected-color');
    if (value) {
      $('.uk-background-color > [data-wysihtml5-command-value="'+ value +'"]').addClass('uk-selected-color');
    }
  }
});

$('.uk-dropdown').click(function(e){
    if (!e.target.classList.contains('nohideonclick')){
        $(this).hide();
    }
})

/* colors */

$('.uk-text-color').children().last().click(function(){
    composer.commands.remove('foreColorStyle');
});
$('.uk-background-color').children().last().click(function(){
    composer.commands.remove('bgColorStyle');
});

/* START TABLE */
var $tableSelectionGrid = $('#tableSelectionGrid');

var rows=Array.from($tableSelectionGrid.get(0).children),
    cells=[];
for (var row of rows)
    cells.push(Array.from(row.children))

$tableSelectionGrid.mouseover( function(e) {
    var cell=e.target.className==='ce11'?e.target:e.target.parentNode;
    var _i=rows.indexOf(cell.parentNode), _j=cells[_i].indexOf(cell);
    $('#currentSelection').text((_i+1)+'x'+(_j+1));
    for (var i=0;i<10;i++)
        for (var j=0;j<10;j++)
            cells[i][j].firstChild.className= i<=_i && j<=_j ?'hover':'';
})

$tableSelectionGrid.click( function(e) {
    var cell=e.target.parentNode;
    if (cell.className==='ce11'){
        var i=rows.indexOf(cell.parentNode),...