Wysiwyg Component

The component is a visual formatting wrapper, specifically designed for rich-text. It creates a utility wrapper designed to give rich-text content a consistent and customizable appearance. This is particularly useful when dealing with content from WYSIWYG editors, where the output can vary based on user input. The component ensures that such content is displayed consistently and aesthetically.

Il componente è un wrapper di formattazione visiva, specificamente progettato per i testi arricchiti. Crea un wrapper che conferire al contenuto del testo arricchito un aspetto coerente e personalizzabile. Questo è particolarmente utile quando si tratta di contenuti provenienti da editor WYSIWYG, dove l'output può variare in base all'input dell'utente. Il componente garantisce che tale contenuto venga visualizzato in modo coerente ed esteticamente gradevole.

API Reference

CSS variables

| Name | default | Description | |:----------------------------------|:--------------|:---------------------------| | --wysiwyg-h1-font-weight | inherit | h1 font-weight | | --wysiwyg-h1-font-size | inherit | h1 font-size | | --wysiwyg-h1-line-height | inherit | h1 line-height | | --wysiwyg-h1-font-family | inherit | h1 font-family | | --wysiwyg-h2-font-weight | inherit | h2 font-weight | | --wysiwyg-h2-font-size | inherit | h2 font-size | | --wysiwyg-h2-line-height | inherit | h2 line-height | | --wysiwyg-h2-font-family | inherit | h2 font-family | | --wysiwyg-h3-font-weight | inherit | h3 font-weight | | --wysiwyg-h3-font-size | inherit | h3 font-size | | --wysiwyg-h3-line-height | inherit | h3 line-height | | --wysiwyg-h3-font-family | inherit | h3 font-family | | --wysiwyg-h4-font-weight | inherit | h4 font-weight | | --wysiwyg-h4-font-size | inherit | h4 font-size | | --wysiwyg-h4-line-height | inherit | h4 line-height | | --wysiwyg-h4-font-family | inherit | h4 font-family | | --wysiwyg-h5-font-weight | inherit | h5 font-weight | | --wysiwyg-h5-font-size | inherit | h5 font-size | | --wysiwyg-h5-line-height | inherit | h5 line-height | | --wysiwyg-h5-font-family | inherit | h5 font-family | | --wysiwyg-h6-font-weight | inherit | h6 font-weight | | --wysiwyg-h6-font-size | inherit | h6 font-size | | --wysiwyg-h6-line-height | inherit | h6 line-height | | --wysiwyg-h6-font-family | inherit | h6 font-family | | --wysiwyg-paragraph-font-weight | inherit | paragraph font-weight | | --wysiwyg-paragraph-font-size | inherit | paragraph font-size | | --wysiwyg-paragraph-line-height | inherit | paragraph line-height | | --wysiwyg-paragraph-font-family | inherit | paragraph font-family | | --wysiwyg-a-color | dodgerblue | tag a color | | --wysiwyg-spacing-bottom | 0 | spacing below each element | | --wysiwyg-table-cell-padding | 5px 10px | padding of the table cells | | --wysiwyg-table-border-width | 1px | table border width | | --wysiwyg-table-border-style | solid | table border style | | --wysiwyg-table-border-color | #000000 | table border color | | --wysiwyg-pre-max-height | 600px | tag pre max-height | | --wysiwyg-pre-padding | 0.5em 2.5em | tag pre padding | | --wysiwyg-pre-bg-color | navy | tag pre background color | | --wysiwyg-pre-color | #ffffff | tag pre color | | --wysiwyg-mark-bg-color | navy | tag mark background color | | --wysiwyg-mark-color | #ffffff | tag mark color |

Usage/Examples

<wysiwyg-cmp>
  <h1>This is an H1</h1>
  <h2>This is an H2</h2>
  <h3>This is an H3</h3>
  <h4>This is an H4</h4>
  <h5>This is an H5</h5>
  <h6>This is an H6</h6>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur
    debitis exercitationem ipsum iusto perferendis porro rerum! Dolorum fugiat
    iusto neque.
  </p>
  <ul>
    <li>li element first</li>
    <li>li element second</li>
    <li>
      li element third
      <ul>
        <li>li element first</li>
        <li>li element second</li>
        <li>li element third</li>
        <li>li element fourth</li>
      </ul>
    </li>
    <li>li element fourth</li>
  </ul>
  <ol>
    <li>li element first</li>
    <li>
      li element second
      <ol>
        <li>li element first</li>
        <li>li element second</li>
        <li>li element third</li>
        <li>li element fourth</li>
      </ol>
    </li>
    <li>li element third</li>
    <li>li element fourth</li>
  </ol>
  <dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem
      nec elit.
    </dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Column heading</th>
        <th>Column heading</th>
        <th>Column heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="active">
        <th scope="row">1</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="success">
        <th scope="row">3</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="info">
        <th scope="row">5</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="warning">
        <th scope="row">7</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr>
        <th scope="row">8</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="danger">
        <th scope="row">9</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
    </tbody>
  </table>
  <blockquote cite="http://www.worldwildlife.org/who/index.html">
    <p>
      This. is a blockquote.
      <br />
      For 50 years, WWF has been protecting the future of nature. The world’s
      leading conservation organization, WWF works in 100 countries and is
      supported by 1.2 million members in the United States and close to 5
      million globally. WWF's unique way of working combines global reach with
      a foundation in science, involves action at every level from local to
      global, and ensures the delivery of innovative solutions that meet the
      needs of both people and nature.
    </p>
  </blockquote>
  <pre>
    <code>
      .post-title {
        margin: 0 0 5px;
        font-weight: bold;
        font-size: 38px;
        line-height: 1.2;
        and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
      }
    </code>
  </pre>
  <p>
    The following snippet of text is
    <strong>rendered as bold text</strong>
  </p>
  <p>
    The following snippet of text is
    <b>rendered as bold text</b>
  </p>
  <p>
    The following snippet of text is
    <em>rendered as italic text</em>
  </p>
  <p>
    The following snippet of text is
    <i>rendered as italic text</i>
  </p>
  <p>
    The following snippet of text is
    <dfn>rendered as italic text</dfn>
  </p>
  <p>
    The following snippet of text is
    <mark>rendered as marked text</mark>
  </p>
  <p>
    The abbreviation
    <abbr title="Seriously">srsly</abbr>
    stands for &ldquo;seriously&rdquo;.
  </p>
  <p>
    <small>This is some smaller text.</small>
  </p>
  <p>
    &ldquo;Nel mezzo del cammin di nosta vita...&rdquo; –
    <cite>Divina Commedia</cite>
  </p>
  <p>
    This tag will let you
    <del>strikeout text</del>
  </p>
  <p>
    This tag will let you
    <s>strikeout text</s>
  </p>
  <p><u>This line of text will render as underlined</u></p>
  <p>
    This tag should denote
    <ins>inserted</ins>
    text.
  </p>
  <p>
    <q>This tag is a quote followed by is author</q>
    – Steve Ballmer
  </p>
  <p>
    Getting our science styling on with H
    <sub>2</sub>
    O, which should push the 2 down.
  </p>
  <p>
    Still sticking with science and Isaac Newton’s E = MC
    <sup>2</sup>
    , which should lift the 2 up.
  </p>
  <p>
    Press
    <kbd>Ctrl</kbd>
    +
    <kbd>C</kbd>
    to copy text (Windows).
  </p>
  <p>
    The CSS
    <code>background-color</code>
    property defines the background color of an element.
  </p>
  <p>
    The area of a triangle is: 1/2 x
    <var>b</var>
    x
    <var>h</var>
    , where
    <var>b</var>
    is the base, and
    <var>h</var>
    is the vertical height.
  </p>
  <p>
    <samp>
      File not found.
      <br />
      Press F1 to continue
    </samp>
  </p>
  <address>
    Written by
    <a href="mailto:[email protected]">Jon Doe</a>
    .
    <br />
    Visit us at:
    <br />
    Example.com
    <br />
    Box 564, Disneyland
    <br />
    USA
  </address>
  <br />
  <label>This is a label</label>
  <br />
  <a href="#">This is a link</a>
  <hr />
  <figure>
    <img width="1440" height="560" src="https://picsum.photos/1440/560" />
    <figcaption>This text is a figcaption</figcaption>
  </figure>
</wysiwyg-cmp>