Ckeditor: Class or Id for Editor Body

CKEditor: Class or ID for editor body

Although that part of the API wasn't ported from 2.x at the time that this question was placed, now it's easier to use the bodyId and bodyClass config options.

Of course, the explanation by nemisj is good and can be useful for other things, but you must remember that each time that you switch away from design (to source view), the iframe is destroyed, so you'll need to reassign your attributes if you do it manually.

how to define ck-editor with id or class

CKEditor docs says the replace method takes an element argument :

element : Object/String
The DOM element (textarea), its ID, or name.

So, you can use document.getElementById to select your textarea and then use CKEditor.replace upon it.

php/HTML :

<textarea id="mytextarea" name="settings" required><?php echo $value;?></textarea>

JS:

var textarea = document.getElementById('mytextarea');
CKEditor.replace(textarea);

CKEditor - Get Element by Id or Class

Use instanceReady event (see my previous answer):

http://jsfiddle.net/oleq/LjggqL1m/

function ckeditor_init() { // This works
    CKEDITOR.replace(textarea, {
        language: 'fr',
        allowedContent: true,
        on: {
            instanceReady: function() {
                var editor = this;
                var data = editor.getData();
                var el = $(editor.document.getById('2'));

               alert(el);
            }
        }
    });
}

You could also get interested in editor#contentDom event, which fires each time editor's DOM is loaded, i.e. on editor.setData().

CKEDITOR - Select span by its ID or CLASS and get its data attribute value

i clone ur project on my desktop, and it work for me! But in Fiddle IT does not work! Be careful! I dont know why, but in fiddle it just dont work, try that:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="ckeditor_block">
    <textarea id="editor1"> <span class="sub" id="sub1" data-time-start="0">Hello </span>
     <span class="sub" id="sub2" data-time-start="2">My </span>
     <span class="sub" id="sub3" data-time-start="6">Name </span>
     <span class="sub" id="sub4" data-time-start="8">Is </span>
     <span class="sub" id="sub5" data-time-start="12">Zoob</span>
    </textarea>
</div>
<script type='text/javascript'>
var textarea;
$(document).ready(function () {
    textarea = $('#ckeditor_block').find('textarea').attr('id');
    CKEDITOR.replace(textarea, {
        language: 'fr',
        uiColor: '#9AB8F3',
        allowedContent: true,
        disallowedContent: 'script; *[on*]',
        enterMode: CKEDITOR.ENTER_BR,
        toolbar: [
            ['Bold', 'Italic', 'Underline', '-', 'TextColor', '-', 'RemoveFormat'],
            ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
            ['Find', 'Replace', 'SelectAll'],
            ['Source', '-', 'Maximize', '-', 'Save']
        ]
    });
    function waitInit(){
        var subs = $( CKEDITOR.instances.editor1.window.getFrame().$ ).contents().find('.sub' );
        $.each(subs, function(){
            $this = $(this);
            console.log("value = " + $this.text());
            console.log("time = " + $this.attr('data-time-start'));
        });
    }
    CKEDITOR.on('instanceReady', function(){ waitInit(); });
});   
</script>
</body></html>

It was 2 trouble - first on fiddle, and second - we call function before ckeditor initialize, i cant find callback for init, so input timeout with a little delay, for it, i test it - all works fine!

Body persitant inline style in ckEditor

I found out a dirty hack:

$(this).find('textarea.editor').ckeditor({
        bodyId: Id+'" style="'+style,
    });

not very nice but it works ;-)

CKEditor get selected editor

I was able to solve this issue by adding a blur event to each editor and storing the last id of the last time the event was called.

var currentEditorInstance = 'mtxDescription';   
for(name in CKEDITOR.instances) {
CKEDITOR.instances[name].on('blur', function () {
        currentEditorInstance = this.name;
});
}

Ckeditor: Class or Id for Editor Body