Agregar clase a la imagen seleccionada en ckeditor

Tengo problemas para agregar clases a la imagen seleccionada en ckeditor. Lo que se me ocurrió es este http://sofes.miximages.com/javascript/8d89802e1d6f6371f5bc326898d8b414.jpg .

Agregué 2 botones para seleccionar si una imagen está en modo retrato o paisaje. Puede seleccionar cualquiera de ellos o ninguno, y agregar costum alto / ancho.

Aquí está mi código:

CKEDITOR.replace('maindesc', { "extraPlugins": "imgbrowse", "filebrowserImageBrowseUrl": "/ckeditor/plugins/imgbrowse", on: { instanceReady: function() { this.dataProcessor.htmlFilter.addRules( { elements: { img: function( el ) { // Add an attribute. if ( !el.attributes.alt ) { el.attributes.alt = 'Img'; el.addClass('ckeditorImg'); if (Landscape == 1) { el.addClass('ckLandscape'); el.attributes['style'] = ''; } else if (Portrait == 1) { el.addClass('ckPortrait'); el.attributes['style'] = ''; } } } } } ); } } }); 

Por lo que yo entiendo, esto pasa por todo, así que escribí que si la imagen no tiene un atributo alt para agregar uno y agregar las clases que quiero. Lamentablemente, este enfoque no me permite cambiar la clase en la imagen seleccionada cuando un usuario desea cambiarla, sino que debe eliminar la imagen, seleccionarla nuevamente y luego elegir la clase.

Mi pregunta es si hay una manera de llegar a la imagen seleccionada actualmente en lugar de pasar por todas las tags en ckeditor y cambiar su clase.

Aquí hay un ejemplo de cómo agregar un nuevo botón a ckeditor que está habilitado / deshabilitado en función del elemento que selecciona actualmente y agregar una clase a ese elemento específico (en este ejemplo, es para imágenes; sin embargo, puede usarlo de cualquier manera) usted quiere).

 // Set the callback function var setLandscapeClass = { exec: function(editor) { editor.getSelection().getStartElement().addClass('ckLandscape') } } //Create the plugin CKEDITOR.plugins.add('setLandscapeClass', { init: function(editor) { editor.addCommand('setLandscapeClass', setLandscapeClass); editor.ui.addButton("setLandscapeClass", { label: 'Set Landscape Class', icon: '', command: 'setLandscapeClass' }); } }); // Create the instance and add the plugin CKEDITOR.replace( 'editor1', { extraPlugins: 'setLandscapeClass', allowedContent: true }); // enable/disable the button based on the selection of the text in the editor CKEDITOR.instances.editor1.on( 'selectionChange', function( evt ) { var landscapeButton = this.getCommand( 'setLandscapeClass' ); if ( evt.data.path.lastElement.is( 'img' ) ) { landscapeButton.enable(); } else { landscapeButton.disable(); } }); 

Puedes ver una demostración funcional aquí:
https://jsfiddle.net/7nm9q1qv/

Solo creé 1 botón, y no hay ningún icono allí. Creo que puedes usar ese código para crear también el segundo botón (para la clase de retrato).

Actualizar – agregar elemento al menú contextual

Para agregar un nuevo elemento al menú contextual, debe agregar este código:

 // Add the context-menu if (editor.addMenuItem) { editor.addMenuGroup('testgroup'); editor.addMenuItem('setLandscapeItem', { label: 'Set landscape class', command: 'setLandscapeClass', group: 'testgroup' }); } // On contextmenu - set the item as "visible" by the menu if (editor.contextMenu) { editor.contextMenu.addListener(function(element, selection) { if (element.hasClass('ckLandscape') === false) { return { setLandscapeItem: CKEDITOR.TRISTATE_ON }; } }); } 

Dentro de la función init del complemento que agregas.

Puedes ver que agregué esta línea:

 if (element.hasClass('ckLandscape') === false) { 

(Que puede eliminar) solo para darle un ejemplo de cómo mostrar el elemento en el menú solo si la clase ckLandscape no existe para esta imagen.

La versión actualizada de jsfiddle está aquí:
https://jsfiddle.net/7nm9q1qv/1/