CODE

Style WYSIWYG Editor Content with External CSS

Display the content in the WYSIWYG editor more inline with the site’s styles (or alternate custom styles).

v1.0.0

Help your client when adding and styling content from the admin editor view by displaying content closer to how it will actually look when published into the context of the site.

This can also help avoid incorrect colours/styles being applied and brand guidelines being inadvertently overridden by inline styles due to the visual discrepancy of the WYSIWYG editor.

  1. Simply add the below code directly to each page/item’s WYSIWYG editor and it will load the referenced CSS file for any content within.
    Replace the path with your site's CSS file.

    <!-- Treehouse CODE v1.0.0 -->
{% comment %}
<link rel="stylesheet" href="/path-to-your/css-file.css" type="text/css">
{% endcomment %}

    This works because Liquid code is not processed in the admin editors and as such the comment tags are ignored, resulting in the containing code being rendered. However, once processed on the front-end site, Liquid code is honored and the containing code is commented out.

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.