@frankhoodbs/wysiwyg-cmp
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

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.

Version License

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:webmaster@example.com">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>

Readme

Keywords

none

Package Sidebar

Install

npm i @frankhoodbs/wysiwyg-cmp

Weekly Downloads

47

Version

2.0.3

License

ISC

Unpacked Size

18.2 kB

Total Files

10

Last publish

Collaborators

  • giando110188
  • frankhood-info
  • skill83
  • m.brandonisio