Wysiwyg

Jump To:

For auto formatting general HTML elements (used around editor/body text). This selector can't currently be changed.

Demos

WYSIWYG Content

Automatically applies standard styling to raw HTML elements (headings, lists, links) within a container.

Main Topic

This is a paragraph with a link inside it. The styling is automatically handled by the `.wysiwyg` class.

Unordered list item one
Unordered list item two

Sub-section

Headings are also automatically sized according to the typography configuration.

<div class="wysiwyg">
  <h2>Main Topic</h2>
  <p>This is a paragraph with a <a href="#">link inside it</a>. The styling is automatically handled by the `.wysiwyg` class.</p>
  <ul>
    <li>Unordered list item one</li>
    <li>Unordered list item two</li>
  </ul>
  <h3>Sub-section</h3>
  <p>Headings are also automatically sized according to the typography configuration.</p>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "exclude-selector" : ".wysiwyg__exclude",
  "img-excluded-selectors" : (),
  "ul-excluded-selectors" : (".list-lines",),
  "ol-excluded-selectors" : (".counter-list",),
  "link-excluded-selectors" : ("[class]",),
  "headline-sizes" : (
    "h2" : "h2",
    "h3" : "h3",
    "h4" : "h4",
    "h5" : "h5",
    "h6" : "h6",
  ),
  "ul-marker-color" : "bullet",
  "ol-marker-color" : inherit,
);

File Information

File: _wysiwyg.scss
Group: wysiwyg
Type: variable
Lines (comments): 14-20
Lines (code): 22-37

Map Properties

Name	Type	Default	Description
exclude-selector	String	".wysiwyg__exclude"	Applied to all selectors
img-excluded-selectors	List	()	Extra selectors to prevent styling
ul-excluded-selectors	List	(".list-lines",)	Extra selectors to prevent styling
link-excluded-selectors	List	("[class	",)] Extra selectors to prevent styling
headline-sizes	Map	Map	Headlines from typography sizes (ElementName : TypographySizeName, ...)

Mixins

set()

Mixin

Change modules $config

File Information

File: _wysiwyg.scss
Group: wysiwyg
Type: mixin
Lines (comments): 39-42
Lines (code): 44-46

Examples

@include ulu.component-wysiwyg-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Output component stylesheet

Note this is setup so that it can be used for separate stylesheets (ie. tinyMCE or ckeditor)

File Information

File: _wysiwyg.scss
Group: wysiwyg
Type: mixin
Lines (comments): 57-63
Lines (code): 65-73

Examples

@include ulu.component-wysiwyg-styles(true);
// Output not in selector (for editor stylesheet/preview)
@include ulu.component-wysiwyg-styles(false);

Parameters

Name	Type	Default	Description
$in-selector	`Boolean`	true	Whether to print with .wysiwyg selector or not, used when building like editor/ckeditor stylesheet where these aren't wrapped in selector and should just affect all elements in the editor

Functions

get()

Function

Get a config option

File Information

File: _wysiwyg.scss
Group: wysiwyg
Type: function
Lines (comments): 48-51
Lines (code): 53-55

Examples

@include ulu.component-wysiwyg-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config