Bootstrap and easyedit

serger · 2017-08-01 00:36:42 UTC

Matrix Version:
We’d like to load bootstrap in Easyedit so the bootstrap classes are usable while we edit. When I look into the source code of the WYSIWYG editor I can see CSS and JS being loaded like:

<link rel="stylesheet" type="text/css" href="http://intra.justice.tas.gov.au/__lib/web/css/edit.css">
<link rel="stylesheet" type="text/css" href="http://intra.justice.tas.gov.au/__lib/asset_map/js/js_asset_map.css">

I would like to know where in matrix I should specify the lines

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

So all the classes get loaded and become usable from within the WYSIWYG editor.

NickyP · 2017-08-01 05:25:46 UTC

Try looking for a file (in our case a standard page asset) EES Styles and Scripts.
Hope this Helps. Note: be careful that there are no conflicts!!

serger · 2017-08-01 23:49:27 UTC

Thanks for the hint however it seems like the list of what is there is not the list of css that is loaded when I look at the code of the WYSIWYG editor:

Any idea of where those css are loaded from? (which config / resource file is calling them) (@Bart ?)

Douglas · 2017-08-02 22:05:11 UTC

Is this for use within Edit+ or the Admin Console (_admin) ?

serger · 2017-08-02 22:40:24 UTC

Both but _admin as priority.

Douglas · 2017-08-02 23:08:29 UTC

Just answering the previous query - poke about the filesystem if you have access. Both the css and js files are in the filesystem (/core/lib/) under the root folder for the Matrix instance from what I can quickly tell.

I’d assume (Bart would be best placed to answer) that there must be some way to add in supplemental local styling CSS - or if not, it would seem a worthy Matrix improvement.

serger · 2017-08-02 23:25:34 UTC

Unfortunately I don’t have access (gov department setup) otherwise yeah a simple grep of the codebase would have answered that one

Yep one of the Matrix developer is best to answer that one I think too.

Bart · 2017-08-03 23:23:33 UTC

So, you can’t add your custom CSS and JS into the Admin interface editing screens, with the exception of doing it on Content Templates. This has been discussed before as a feature request though, a long time ago, but never went anywhere (might be worth starting the discussion again).

In Edit+ it is however possible and yea, you need to add the references to your Edit+ Standard Page nester.

If you are on 5.4, have a look at the installation guide and the section around adding your own custom stuff into the Edit+ interface: https://matrix.squiz.net/manuals/edit-plus/chapters/edit-plus-installation-guide#customising-global-edit-configurations

There is also a tutorial that explains a simple example on how you can do it: https://matrix.squiz.net/tutorials/2017/how-to-customise-the-edit-wysiwyg-styles

But as Nick mentioned, be aware of bringing the whole Bootstrap stylesheet into Edit+, as it is effectively a big reset stylesheet and will affect other areas of the Edit+ interface, so you might want to customise/limit what you bring in.