Editorconcepts

Frontend

Block

A Block is a <p> element with its content and children. The class specifies what type it is: With return you create a new block, with shift+return you create a linebreak.

Do not use bootstrap toogle buttons with data-toggle attribute

Reason: To check if the button ist pressed you use the $(button).hasClass('active'). But when you click the button the 'active' class might be updated after the click-listener [ $(button).click(..) ] was triggered. So requesting the button state in the click-listener will sometimes give the wrong result and sometimes the right one depending on how the event listeners are executed (race condition). Solution: We simply do not use the boostrap "data-toggle" but instead toggle the class on our own in the click-listener. See the following code:

$(button).click(function(){
    $(button).toggleClass('active');
    if($(button).hasClass('active')){
        //do something when button gets pressed;
    }else{
         //do something when button gets released;
    }
})

We do not use Websockets

Reason: Web sockets require some server side installations that would complicate the installation of the whole plattform (see for example http://socketo.me/docs/deploy). Those are installation of external programs or modifying php config, which is not allowed for most web hosting packages and would require the user to switch to a root server. Easy-install is one of the most important features an so we won´t use websockets but ajax and long polling instead.

Bootstrap Popover and Select2

When you use a select2 in a bootstrap popover you must set a css width and height attribute otherwise the popover gets a wrong position because the select2 changes its size. see also
Example:

.popover{width: 249px; height: 304px;}

The Editor HTML/CSS Layout

The editor layout is build from html and css and uses only very little javascript for dynamically setting sizes. Actually javascript is only used for fading the left sidebar in and out. The page relys heavily on the css {position: absolute;}.
The elements that are centered use the css from link to be centered without having to declare a width attribute (flexible width!)