javascript - Get style value of selection in CKEditor -

i using ckeditor's editing capabilities, own ui controls calls ckeditor's api perform commands. e.g.,

var style = new ckeditor.style({     element: 'span',     attributes: {         'style': 'font-size: 20px'     } });  editor.applystyle(style); 

to set font size of selected text.

problem need way know status of selected text can update controls accordingly. bold? bold button should in activated state, , clicking should remove boldness instead of attempting add again.

is there way query ckeditor style attributes of selected text? how tinymce.activeeditor.querycommandvalue('bold') works in tinymce.

usually, best way create button-command-style trio done in basicstyles plugin:

var style = new ckeditor.style( { ... } );  editor.attachstylestatechange( style, function( state ) {     !editor.readonly && editor.getcommand( 'commandname' ).setstate( state ); } );  editor.addcommand( 'commandname', new ckeditor.stylecommand( style ) );  editor.ui.addbutton( 'buttonname', {     label: 'buttonlabel',     command: 'commandname' } ); 

this code take care of - command , button state updated according selection changes. can command state easily:

editor.getcommand( 'commandname' ).state; // returns on of ckeditor.tristate_*. 

however, if want query state of style directly, can use style.checkactive() method:

style.checkactive( editor.elementpath(), editor ); 

you don't need create command , buttons work.

edit

the ckeditor styles system has limitations. example, cannot have variable font size in style. means check current font size need quick search in dom:

function getfontsize() {     var span = editor.elementpath().contains( isfontsizespan );      return span ? span.getstyle( 'font-size' ) : null;      function isfontsizespan( el ) {         return el.is( 'span' ) && el.getstyle( 'font-size' );     } } 

now, use method in editor#selectionchange event listener update control's value.