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.
Comments
Post a Comment