diff --git a/CHANGES.md b/CHANGES.md index 607442071c1..eba5fb1c5ce 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ CKEditor 4 Changelog New Features: +* [#13829](http://dev.ckeditor.com/ticket/13829): Fixed: No class in [Widget](http://ckeditor.com/addon/widget) wrapper that would identify the widget type. * [#14449](http://dev.ckeditor.com/ticket/14449): Introduced the [Balloon Panel](http://ckeditor.com/addon/balloonpanel) plugin. * [#12077](https://dev.ckeditor.com/ticket/12077): Added support for the HTML5 `download` attribute in link (``) elements. Thanks to [sbusse](https://github.com/sbusse)! * [#13518](http://dev.ckeditor.com/ticket/13518): Introduced [`additionalRequestParameters`](http://docs.ckeditor.com/#!/api/CKEDITOR.fileTools.uploadWidgetDefinition-property-additionalRequestParameters) property. diff --git a/plugins/widget/plugin.js b/plugins/widget/plugin.js index 4b6f10c275c..5bd8933f6b6 100644 --- a/plugins/widget/plugin.js +++ b/plugins/widget/plugin.js @@ -627,7 +627,9 @@ isInline; if ( element instanceof CKEDITOR.dom.element ) { - widgetDef = this.registered[ widgetName || element.data( 'widget' ) ]; + widgetName = widgetName || element.data( 'widget' ); + widgetDef = this.registered[ widgetName ]; + if ( !widgetDef ) return null; @@ -639,13 +641,13 @@ // If attribute isn't already set (e.g. for pasted widget), set it. if ( !element.hasAttribute( 'data-cke-widget-keep-attr' ) ) element.data( 'cke-widget-keep-attr', element.data( 'widget' ) ? 1 : 0 ); - if ( widgetName ) - element.data( 'widget', widgetName ); + + element.data( 'widget', widgetName ); isInline = isWidgetInline( widgetDef, element.getName() ); wrapper = new CKEDITOR.dom.element( isInline ? 'span' : 'div' ); - wrapper.setAttributes( getWrapperAttributes( isInline ) ); + wrapper.setAttributes( getWrapperAttributes( isInline, widgetName ) ); wrapper.data( 'cke-display-name', widgetDef.pathName ? widgetDef.pathName : element.getName() ); @@ -655,7 +657,9 @@ element.appendTo( wrapper ); } else if ( element instanceof CKEDITOR.htmlParser.element ) { - widgetDef = this.registered[ widgetName || element.attributes[ 'data-widget' ] ]; + widgetName = widgetName || element.attributes[ 'data-widget' ]; + widgetDef = this.registered[ widgetName ]; + if ( !widgetDef ) return null; @@ -671,8 +675,7 @@ isInline = isWidgetInline( widgetDef, element.name ); - wrapper = new CKEDITOR.htmlParser.element( isInline ? 'span' : 'div', getWrapperAttributes( isInline ) ); - + wrapper = new CKEDITOR.htmlParser.element( isInline ? 'span' : 'div', getWrapperAttributes( isInline, widgetName ) ); wrapper.attributes[ 'data-cke-display-name' ] = widgetDef.pathName ? widgetDef.pathName : element.name; var parent = element.parent, @@ -2199,7 +2202,7 @@ return false; } - function getWrapperAttributes( inlineWidget ) { + function getWrapperAttributes( inlineWidget, name ) { return { // tabindex="-1" means that it can receive focus by code. tabindex: -1, @@ -2208,7 +2211,8 @@ 'data-cke-filter': 'off', // Class cke_widget_new marks widgets which haven't been initialized yet. 'class': 'cke_widget_wrapper cke_widget_new cke_widget_' + - ( inlineWidget ? 'inline' : 'block' ) + ( inlineWidget ? 'inline' : 'block' ) + + ( name ? ' cke_widget_' + name : '' ) }; } diff --git a/tests/plugins/widget/_helpers/tools.js b/tests/plugins/widget/_helpers/tools.js index e27de89c78e..b2a1c53f479 100644 --- a/tests/plugins/widget/_helpers/tools.js +++ b/tests/plugins/widget/_helpers/tools.js @@ -373,7 +373,7 @@ var widgetTestsTools = ( function() { assertWidget: assertWidget, widgetInitedWrapperAttributes: - 'class="cke_widget_wrapper cke_widget_(?:inline|block)" ' + + 'class="cke_widget_wrapper cke_widget_(?:inline|block) cke_widget_test(?:_upcasted_pasting|inline|block)" ' + 'contenteditable="false" ' + '(?:data-cke-display-name="[a-z0-9]+" )?' + '(?:data-cke-expando="[0-9]+" )?' + @@ -382,7 +382,7 @@ var widgetTestsTools = ( function() { 'data-cke-widget-wrapper="1" ' + 'tabindex="-1"', widgetWrapperAttributes: - 'class="cke_widget_wrapper cke_widget_new cke_widget_(?:inline|block)" ' + + 'class="cke_widget_wrapper cke_widget_new cke_widget_(?:inline|block) cke_widget_test(?:1|2|inline|block)?" ' + 'contenteditable="false" ' + '(?:data-cke-display-name="[a-z0-9]+" )?' + '(?:data-cke-expando="[0-9]+" )?' + @@ -403,4 +403,4 @@ var widgetTestsTools = ( function() { '' }; -} )(); \ No newline at end of file +} )(); diff --git a/tests/plugins/widget/widgetsrepoapi.js b/tests/plugins/widget/widgetsrepoapi.js index 7f36e7362c4..3634029abb7 100644 --- a/tests/plugins/widget/widgetsrepoapi.js +++ b/tests/plugins/widget/widgetsrepoapi.js @@ -229,6 +229,7 @@ assert.areSame( 'span', wrapper.getName(), 'inline wrapper name' ); assert.areSame( el, wrapper.getFirst(), 'inline wrapper first child' ); + assert.isTrue( wrapper.hasClass( 'cke_widget_test' ), 'wrapper has css class based on widget name' ); assert.isMatching( new RegExp( '^

foofoobar(
)?

$' ), fixHtml( editor.editable().getHtml() ) @@ -248,6 +249,7 @@ assert.areSame( 'div', wrapper.getName(), 'block wrapper name' ); assert.areSame( el, wrapper.getFirst(), 'block wrapper first child' ); + assert.isTrue( wrapper.hasClass( 'cke_widget_test' ), 'wrapper has css class based on widget name' ); assert.isMatching( new RegExp( '^

foo(
)?

foo

bar(
)?

$' ), fixHtml( editor.editable().getHtml() ), 'HTML after 1st wrapElement()' @@ -275,6 +277,7 @@ assert.areSame( 'span', wrapper.getName(), 'inline wrapper name' ); assert.areSame( el, wrapper.getFirst(), 'inline wrapper first child' ); + assert.isTrue( wrapper.hasClass( 'cke_widget_test' ), 'wrapper has css class based on widget name' ); assert.isMatching( new RegExp( '^

foofoobar(
)?

$' ), fixHtml( editor.editable().getHtml() ) @@ -332,6 +335,7 @@ var wrapper = this.editor.widgets.wrapElement( el, 'test' ); assert.areSame( 'span', wrapper.name, 'inline wrapper name' ); + assert.isTrue( wrapper.hasClass( 'cke_widget_test' ), 'wrapper has css class based on widget name' ); assert.areSame( el, wrapper.children[ 0 ], 'inline wrapper first child' ); assert.isMatching( new RegExp( '^

foofoobar

$' ), writeFrag( frag ) ); },