diff --git a/core/modules/ckeditor/js/ckeditor.js b/core/modules/ckeditor/js/ckeditor.js index 497393f..8efed46 100644 --- a/core/modules/ckeditor/js/ckeditor.js +++ b/core/modules/ckeditor/js/ckeditor.js @@ -273,6 +273,23 @@ } }); + /** + * Pull the ID from the original textarea, that gets hidden. Specifically for + * jump-to links used with Inline Form Errors. + */ + function redirectTextareaFragmentToCKEditorInstance() { + var hash = location.hash.substr(1); + var element = document.getElementById(hash); + if (element) { + var editor = CKEDITOR.dom.element.get(element).getEditor(); + if (editor) { + var id = editor.container.getAttribute('id'); + document.location.hash = '#' + id; + } + } + } + $(window).on('hashchange', redirectTextareaFragmentToCKEditorInstance); + // Set the CKEditor cache-busting string to the same value as Drupal. CKEDITOR.timestamp = drupalSettings.ckeditor.timestamp; diff --git a/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorInlineErrorsTest.php b/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorInlineErrorsTest.php new file mode 100644 index 0000000..8a89fc4 --- /dev/null +++ b/core/modules/ckeditor/tests/src/FunctionalJavascript/CKEditorInlineErrorsTest.php @@ -0,0 +1,130 @@ + 'filtered_html', + 'name' => 'Filtered HTML', + 'weight' => 0, + ]); + $filtered_html_format->save(); + + Editor::create([ + 'format' => 'filtered_html', + 'editor' => 'ckeditor', + ])->save(); + + // Create a node type for testing. + NodeType::create(['type' => 'page', 'name' => 'page'])->save(); + + $field_storage = FieldStorageConfig::loadByName('node', 'body'); + + // Create a body field instance for the page node type. + FieldConfig::create([ + 'field_storage' => $field_storage, + 'bundle' => 'page', + 'label' => 'Body', + 'settings' => ['display_summary' => TRUE], + 'required' => TRUE, + ])->save(); + + // Assign widget settings for the 'default' form mode. + EntityFormDisplay::create([ + 'targetEntityType' => 'node', + 'bundle' => 'page', + 'mode' => 'default', + 'status' => TRUE, + ])->setComponent('body', ['type' => 'text_textarea_with_summary']) + ->save(); + + // Create a user and login. + $account = $this->drupalCreateUser([ + 'administer nodes', + 'create page content', + 'use text format filtered_html', + ]); + $this->drupalLogin($account); + } + + /** + * Tests if the fragment link to a textarea works with CKEditor-enabled. + */ + public function testFragmentLink() { + $session = $this->getSession(); + + // Go to the add node page. + $this->drupalGet('node/add/page'); + + $page = $this->getSession()->getPage(); + + // Only enter a title in the node add form and leave the body field empty. + $edit = ['edit-title-0-value' => 'Test inline form error with CKEditor']; + + // Submit the form. + $this->submitForm($edit, 'Save and publish'); + + // Add a bottom margin to the title field to be sure the body field is not + // visible. PhantomJS runs with a resolution of 1024x768px. + $session->executeScript("document.getElementById('edit-title-0-value').style.marginBottom = '800px';"); + + // Javascript to test if top of the CKEditor-enabled body field is visible + // in the viewport. The NodeElement::isVisible() method doesn't take the + // viewport into account. + $javascript = <<= 0 && + r.top < (w.innerHeight || e.clientHeight) + ); + }()); +JS; + + // Check that the CKEditor-enabled body field is currently not visible in + // the viewport. + $this->assertFalse($session->evaluateScript($javascript), 'CKEditor-enabled body field is not visible.'); + + // Check if we can find the error fragment link within the errors summary + // message. + $errors_link = $page->find('css', '.messages--error a[href=\#edit-body-0-value]'); + $this->assertTrue($errors_link->isVisible(), 'Error fragment link is visible.'); + + $errors_link->click(); + + // Check that the CKEditor-enabled body field is visible in the viewport. + $this->assertTrue($session->evaluateScript($javascript), 'CKEditor-enabled body field is visible.'); + } + +}