Issue #2682723 by thpoul, jagjitsingh_drupal, avinashm, maggo: Allow ckeditor_stylesheets to refer to external URL, for e.g. webfonts

core/modules/ckeditor/ckeditor.api.php

@@ -44,7 +44,7 @@ function hook_ckeditor_plugin_info_alter(array &$plugins) {
  *
  * @param array &$css
  *   An array of CSS files, passed by reference. This is a flat list of file
- *   paths relative to the Drupal root.
+ *   paths which can be either relative to the Drupal root or external URLs.
  * @param $editor
  *   The text editor object as returned by editor_load(), for which these files
  *   are being loaded. Based on this information, it is possible to load the

core/modules/ckeditor/ckeditor.module

@@ -5,6 +5,7 @@
  * Provides integration with the CKEditor WYSIWYG editor.
  */
 
+use Drupal\Component\Utility\UrlHelper;
 use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\editor\Entity\Editor;
 
@@ -85,8 +86,13 @@ function _ckeditor_theme_css($theme = NULL) {
     $info = system_get_info('theme', $theme);
     if (isset($info['ckeditor_stylesheets'])) {
       $css = $info['ckeditor_stylesheets'];
-      foreach ($css as $key => $path) {
-        $css[$key] = $theme_path . '/' . $path;
+      foreach ($css as $key => $url) {
+        if (UrlHelper::isExternal($url)) {
+          $css[$key] = $url;
+        }
+        else {
+          $css[$key] = $theme_path . '/' . $url;
+        }
       }
     }
     if (isset($info['base theme'])) {

core/modules/ckeditor/src/Tests/CKEditorLoadingTest.php

@@ -194,6 +194,36 @@ class CKEditorLoadingTest extends WebTestBase {
     $this->assertTrue(isset($editor_settings['disallowedContent']));
   }
 
+  /**
+   * Tests loading of theme's CKEditor stylesheets defined in the .info file.
+   */
+  function testExternalStylesheets() {
+    $theme_handler = \Drupal::service('theme_handler');
+    // Case 1: Install theme which has an absolute external CSS URL.
+    $theme_handler->install(['test_ckeditor_stylesheets_external']);
+    $theme_handler->setDefault('test_ckeditor_stylesheets_external');
+    $expected = [
+      'https://fonts.googleapis.com/css?family=Open+Sans',
+    ];
+    $this->assertIdentical($expected, _ckeditor_theme_css('test_ckeditor_stylesheets_external'));
+
+    // Case 2: Install theme which has an external protocol-relative CSS URL.
+    $theme_handler->install(['test_ckeditor_stylesheets_protocol_relative']);
+    $theme_handler->setDefault('test_ckeditor_stylesheets_protocol_relative');
+    $expected = [
+      '//fonts.googleapis.com/css?family=Open+Sans',
+    ];
+    $this->assertIdentical($expected, _ckeditor_theme_css('test_ckeditor_stylesheets_protocol_relative'));
+
+    // Case 3: Install theme which has a relative CSS URL.
+    $theme_handler->install(['test_ckeditor_stylesheets_relative']);
+    $theme_handler->setDefault('test_ckeditor_stylesheets_relative');
+    $expected = [
+      'core/modules/system/tests/themes/test_ckeditor_stylesheets_relative/css/yokotsoko.css',
+    ];
+    $this->assertIdentical($expected, _ckeditor_theme_css('test_ckeditor_stylesheets_relative'));
+  }
+
   protected function getThingsToCheck() {
     $settings = $this->getDrupalSettings();
     return array(

core/modules/system/tests/themes/test_ckeditor_stylesheets_external/test_ckeditor_stylesheets_external.info.yml

@@ -0,0 +1,9 @@
+name: Test external CKEditor stylesheets
+type: theme
+description: 'A theme that uses an external CKEditor stylesheet.'
+version: VERSION
+base theme: false
+core: 8.x
+
+ckeditor_stylesheets:
+  - https://fonts.googleapis.com/css?family=Open+Sans

core/modules/system/tests/themes/test_ckeditor_stylesheets_protocol_relative/test_ckeditor_stylesheets_protocol_relative.info.yml

@@ -0,0 +1,9 @@
+name: Test protocol-relative CKEditor stylesheets
+type: theme
+description: 'A theme that uses a protocol-relative CKEditor stylesheet.'
+version: VERSION
+base theme: false
+core: 8.x
+
+ckeditor_stylesheets:
+  - //fonts.googleapis.com/css?family=Open+Sans

core/modules/system/tests/themes/test_ckeditor_stylesheets_relative/css/yokotsoko.css

@@ -0,0 +1,4 @@
+/**
+ * @file
+ * Test CSS asset file for test_ckeditor_stylesheets_relative.theme.
+ */

core/modules/system/tests/themes/test_ckeditor_stylesheets_relative/test_ckeditor_stylesheets_relative.info.yml

@@ -0,0 +1,9 @@
+name: Test relative CKEditor stylesheets
+type: theme
+description: 'A theme that uses a relative CKEditor stylesheet.'
+version: VERSION
+base theme: false
+core: 8.x
+
+ckeditor_stylesheets:
+  - css/yokotsoko.css