CKEditor changing content automatically

I wish this helpful for you I have no experience with CKEditor, but i know that it is possible with TinyMce. What you need to do is to write an own plugin which will provide the necessary functionality.
OnNodeChange in the 2nd textarea (the one with your css) you need to update the head of the first editors iframe. This code snippet to be executed on a special action (for example onNodeChange) should point you into the right direction:

var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)


iframe_id = tinymce.editors[0].id+'_ifr';

with(document.getElementById(iframe_id).contentWindow){
    var h=document.getElementsByTagName("head");
    if (!h.length) {
        if (DEBUG) console.log('length of h is null');
        return;
    }
    var newStyleSheet=document.createElement("style");
    newStyleSheet.type="text/css";
    h[0].appendChild(newStyleSheet);
    try{
        if (typeof newStyleSheet.styleSheet !== "undefined") {
        newStyleSheet.styleSheet.cssText = css_code;
    }
    else {
        newStyleSheet.appendChild(document.createTextNode(css_code));
        newStyleSheet.innerHTML=css_code;
    }
}

I wish did fix the issue. You might want something like this. Say you have three divs you want to rotate between each week:

<div class="weekly week-1"> Buy our things! </div>
<div class="weekly week-2"> Save 20% today! </div>
<div class="weekly week-3"> Free kitten with every widget! </div>

// Get the number of the week since the epoch.
var week = Math.floor(new Date().getTime() / (1000 * 60 * 60 * 24 * 7));

// Show one div per week.
$('.weekly').hide();
$('.weekly .week-' + (week % 3 + 1)).show();

Any of those help
my default font is 18px. But why did the ckeditor added font-size:13px is puzzling me

 .cke_editable
    {
        font-size: 13px;
        line-height: 1.6em;
    }

 .cke_editable
    {
        font-size: 18px;
        line-height: 1.6em;
    }

I wish this helpful for you Your first problem is that your for loop is causing many fields to all have the same id (contributions, ta-contribution, and num_user). I'd add a counter to your loop and then append that counter to all those ids (and probably the name attributes too). Once you did that, you would be able to access them by id using the instances property as you mentioned.
You can still keep the ta-contribution class and instantiate all the editors using that class while still allowing you to access each instance by id.

CKEDITOR.replaceClass('ta-contribution');
CKEDITOR.instances.ta-contribution1.getData();
CKEDITOR.instances.ta-contribution2.getData();
CKEDITOR.instances.ta-contribution3.getData();

should help you out The CherryPy encode tool automatically encodes content only when the top-level media type is text (text/*).
There is a way to control this with the encode.text_only setting, but it is global and so might introduce issues when returning content that really shouldn't be encoded. As of this writing, an open issue tracks a feature request for more granular control over this behavior: #1123.

contentType = tools.accept.callable(media = ['application/json', 'text/html'])
response.headers['Content-Type'] = "{mediaType}; charset=utf-8".format(mediaType = contentType)

if contentType == 'application/json':
    return json.dumps(studies).encode('utf-8')
elif contentType == 'text/html':
    ...