Load CSS into WYSIWYG

[Adnan-cds]

We can easily load the CSS of the localgov_theme into the WYSIWYG to get a true WYSIWYG experience.

The following code snippet, when added to the localgov_theme.info.yml file, so do the job:

ckeditor_stylesheets:
  - assets/css/font-face.css
  - assets/css/lib/main.css

We may not need to include the Source Sans Pro font here. This font is also used by the localgov_theme. Some trial and error should confirm.

I am linking to the relevant Drupal documentation and example code from the Bartik theme.

@cjstevens78 @finnlewis

[paulpopus]

The only issue with loading the main.css is that you're loading the entire stylesheet for the frontend, which will probably be cached however for each iframe (each rich text editor on the page) your browser will need to process that stylesheet. On a large project and a slow computer this can make the initialisation of each rich text editor take a lot longer.

If possible it'd be good if the font styles can be separated into its own stylesheet from source.

[paulpopus]

I suggest we use a specific stylesheet like ck_style.scss and in that you can include all the components and partials that you want and it will get generated to a separate css file that you can include in the ckeditor. I'll open a PR with this and give it a go.

[Adnan-cds]

Thanks Paul :)

FAO @paulpopus @cjstevens78