-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2872 from ckeditor/t/2816
Fix for: Resize handler was visible after entering read-only mode manually
- Loading branch information
Showing
5 changed files
with
94 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,27 @@ | ||
| <h2> | ||
| Classic Editor | ||
| </h2> | ||
| <div id="editor1" contenteditable="true"> | ||
| <img src="%BASE_PATH%/_assets/logo.png" /> | ||
| </div> | ||
| <h2> | ||
| ReadOnly Editor | ||
| </h2> | ||
| <button id="disable">Toggle read-only mode</button> | ||
| <div id="editor2" contenteditable="true"> | ||
| <img src="%BASE_PATH%/_assets/logo.png" /> | ||
| </div> | ||
|
|
||
| <script> | ||
| CKEDITOR.replace( 'editor1' ); | ||
| CKEDITOR.replace( 'editor2', { | ||
| readOnly: true | ||
| var editor2 = CKEDITOR.replace( 'editor2', { | ||
| readOnly: true, | ||
| on: { | ||
| instanceReady: function() { | ||
| CKEDITOR.document.getById( 'disable' ).on( 'click', function() { | ||
| editor2.setReadOnly( !editor2.readOnly ); | ||
| } ); | ||
| } | ||
| } | ||
| } ); | ||
| </script> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,19 @@ | ||
| @bender-tags: 4.7.3, bug, 719 | ||
| @bender-tags: 4.7.3, 4.11.4, bug, 719, 2816, 2874 | ||
| @bender-ui: collapsed | ||
| @bender-ckeditor-plugins: wysiwygarea, toolbar, image2 | ||
|
|
||
| Only **first** editor should have enabled mouse resizer on image. | ||
| ## Classic Editor | ||
|
|
||
| 1. Focus the image. | ||
|
|
||
| **Expected:** The image resize handler is visible. | ||
|
|
||
| ## ReadOnly Editor | ||
|
|
||
| 1. Focus the image. | ||
|
|
||
| **Expected:** The image resize handler is not visible. | ||
|
|
||
| 2. Click `Toggle read-only mode` multiple times focusing image every time after button click. | ||
|
|
||
| **Expected:** The image resize handler is enabled/disabled depending on the read-only mode state. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,74 @@ | ||
| /* bender-tags: editor,widget */ | ||
| /* bender-ckeditor-plugins: image2,toolbar */ | ||
| /* bender-ckeditor-plugins: image2 */ | ||
|
|
||
| ( function() { | ||
| 'use strict'; | ||
|
|
||
| bender.test( { | ||
| // #719 | ||
| 'test readOnly set to false': function() { | ||
| bender.editorBot.create( { | ||
| name: 'editor1', | ||
| config: { | ||
| language: 'en' | ||
| } | ||
| }, function( bot ) { | ||
| var editor = bot.editor; | ||
| init: function() { | ||
| var css = CKEDITOR.getCss(); | ||
| css = css.replace( '.cke_widget_wrapper:hover .cke_image_resizer', '.cke_widget_wrapper.hover .cke_image_resizer' ); | ||
| CKEDITOR.addCss( css ); | ||
| }, | ||
|
|
||
| // #719, #2874 | ||
| 'test resizer creation without readOnly': testResizerPresence( { name: 'editor1' } ), | ||
|
|
||
| bot.dialog( 'image', function( dialog ) { | ||
| dialog.setValueOf( 'info', 'src', '_assets/foo.png' ); | ||
| dialog.getButton( 'ok' ).click(); | ||
| // #719, #2874 | ||
| 'test resizer creation with readOnly at initialization': testResizerPresence( { name: 'editor2', config: { readOnly: true } } ), | ||
|
|
||
| assert.sameData( | ||
| 'cke_image_resizer', | ||
| editor.editable().getElementsByTag( 'span' ).$[ 2 ].outerHTML.match( /(cke_image_resizer)/g )[ 0 ] | ||
| ); | ||
| // #719, #2874 | ||
| 'test resizer creation with readOnly after initialization': testResizerPresence( { name: 'editor3' }, true ), | ||
|
|
||
| // #719, #2816 | ||
| 'test hovering in read-only': function() { | ||
| bender.editorBot.create( { name: 'editor4', config: { readOnly: true } } , function( bot ) { | ||
| var editor = bot.editor; | ||
| editor.setData( '<img src="_assets/foo.png" alt="" />', function() { | ||
| resume( function() { | ||
| var wrapper = editor.editable().findOne( '.cke_widget_wrapper' ), | ||
| resizer = wrapper.findOne( '.cke_image_resizer' ); | ||
|
|
||
| wrapper.addClass( 'hover' ); | ||
| assert.isTrue( !resizer.isVisible() ); | ||
| } ); | ||
| } ); | ||
| wait(); | ||
| } ); | ||
| }, | ||
|
|
||
| // #719 | ||
| 'test readOnly set to true': function() { | ||
| bender.editorBot.create( { | ||
| name: 'editor2', | ||
| config: { | ||
| readOnly: true | ||
| } | ||
| }, function( bot ) { | ||
| var editor = bot.editor, | ||
| listener; | ||
|
|
||
| listener = editor.on( 'dataReady', function() { | ||
| listener.removeListener(); | ||
|
|
||
| // #719, #2816 | ||
| 'test hovering without read-only': function() { | ||
| bender.editorBot.create( { name: 'editor5', config: { readOnly: false } } , function( bot ) { | ||
| var editor = bot.editor; | ||
| editor.setData( '<img src="_assets/foo.png" alt="" />', function() { | ||
| resume( function() { | ||
| assert.areSame( 2, editor.editable().getElementsByTag( 'span' ).$.length ); | ||
| var wrapper = editor.editable().findOne( '.cke_widget_wrapper' ), | ||
| resizer = editor.editable().findOne( '.cke_widget_image .cke_image_resizer' ); | ||
| wrapper.addClass( 'hover' ); | ||
| assert.isTrue( resizer.isVisible() ); | ||
| } ); | ||
| } ); | ||
|
|
||
| editor.setData( '<img src="_assets/foo.png" alt="" />' ); | ||
| wait(); | ||
| } ); | ||
| } | ||
| } ); | ||
| }() ); | ||
|
|
||
| function testResizerPresence( profile, readOnly ) { | ||
| return function() { | ||
| bender.editorBot.create( profile, function( bot ) { | ||
| var editor = bot.editor; | ||
|
|
||
| editor.setData( '<img src="_assets/foo.png" alt="" />', function() { | ||
| resume( function() { | ||
| if ( readOnly ) { | ||
| editor.setReadOnly( readOnly ); | ||
| } | ||
| assert.isNotNull( editor.editable().findOne( '.cke_widget_image .cke_image_resizer' ), 'Resizer should be created' ); | ||
| } ); | ||
| } ); | ||
| wait(); | ||
| } ); | ||
| }; | ||
| } |