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