Common Fields WYSIWYG - NCIOCPL/cgov-digital-platform GitHub Wiki

WYSIWYG Fields

Simple (Used in captions, Body Section Headings)

  • WYSIWYG Features
    • Bold
    • Italicize
  • Allowed elements:
    • <strong>
    • <em>
    • <p>

Streamlined (Used for intro text on blog posts, About Blog field on blog series, articles, and citations)

  • WYSIWYG Features
    • Bold
    • Italicize
    • Headings
    • Bulleted list
    • Ordered list
    • Allows links (internal and external)
    • Glossification
  • Allowed elements:
    • <a href hreflang> <em> <strong> <cite> <code> <ul type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p>

NCIDS Streamlined without Headings (Used on Mini Landing Page's NCIDS Summary Box Body field)

  • WYSIWYG Features
    • Bold
    • Italicize
    • Strikethrough
    • Subscript
    • Superscript
    • Ordered List
    • Unordered List
    • Links (internal and external)

NCIDS Streamlined with Headings (Used on Mini Landing Page's NCIDS Content Block)

  • WYSIWYG Features
    • Headings
    • Bold
    • Italicize
    • Strikethrough
    • Subscript
    • Superscript
    • Ordered List
    • Unordered List
    • Links (internal and external)

Full HTML (Used for body content)

  • WYSIWYG Features (Formatting)
    • Bold
    • Italicize
    • Headings
    • Bulleted list
    • Ordered list
    • Normal Tables
  • Linking features
    • Managed links
    • External links
    • Glossary links
  • Special HTML supported through source view:
    • Call out boxes
    • Pull quotes
    • Sortable tables
    • ... many other things
  • Embedding Content
    • Insert Image
      • Allows:
        • cgov_image
        • cgov_contextual_image
      • Templates:
        • Image Display: Article: Full
        • Image Display: Article: Large
        • Image Display: Article: Medium
        • Image Display: Article: Small
        • Image Display: Inline
    • Insert Infographic
      • Allows:
        • cgov_infographic
      • Templates:
        • Infographic Display: Article: Large
        • Infographic Display: Article: Medium
    • Insert Video
      • Allows:
        • cgov_video
      • Templates:
        • Video Display: Large: No Title
        • Video Display: Large: Title
        • Video Display: Medium: No Title
        • Video Display: Medium: Title
        • Video Display: Small: No Title
        • Video Display: Small: Title
    • Insert Block Content
      • Allows
        • content_block
        • cgov_external_link_block
        • cgov_image_carousel
        • ncids_mega_menu_content
        • raw_html_block
        • cgov_video_carousel
      • Templates
        • Feature Card: Image
        • Feature Card: No Image
        • Full
    • Insert Featured Content
      • Allows:
        • All Node Content
      • Templates:
        • Feature Card: Image
        • Feature Card: No Image
  • Not allowed:
    • Script tags
    • Form tags
    • Style tags (Style elements, not style attributes)

Raw HTML

  • Allows everything (no WYSIWYG)
  • No changes to what the user has entered

Ideas to Deprecate ?

  • Pull quotes
    • Full-width with author/attribute
    • Full-width without author/attribute
    • Right-aligned with author/attribute
    • Right-aligned without author/attribute
    • Left-aligned with author/attribute
    • Left-aligned without author/attribute
  • Tweet This

Notes for Translations

  • When a piece of content is translated, the wysiwyg content is automatically pulling in the html from the original language (e.g. the English content will appear in the Spanish translation).
  • Users will typically just clear out the wysiwyg and add in the Spanish content.
  • Noting here that we should not expect that any managed links or embedded content would automatically pulled in the spanish version of that link or embedded content (even if it exists).

Copying from Word Docs

Streamlined WYSIWYG

  • Copied text is converted to our WYSIWYG styling
    • Headings are <h> tags without additional styling attributes
    • Paragraphs are <p> tags without additional styling attributes
    • Bold and italics are <strong> and <em> tags without additional styling attributes
    • Superscript and subscript are <sup> and <sub> tags without additional styling attributes
    • Unordered and ordered lists are the expected tags without additional styling attributes
    • Empty <p> tags for double enter
    • Links are the expected tags without additional styling attributes
    • Tables are each of the individual cells in <p> tags
    • Images and comments don't copy

Full WYSIWYG

  • Copied text displays the content exactly how it looks in the Word Doc using specific HTML styling needed
    • Headings and paragraph text have the exact font size and family
      • These are wrapped in a lot of <span> tags that have the attributes
    • Empty <p> tags for double enters
    • Unordered and ordered lists have the exact margins
    • All text will have the exact color (if anything other than black)
    • Hyperlinks have underline and color of unvisited links
    • Tables will have exact border styles, padding and margin, width, alignment
    • If you value your ability to read, do not copy images or comments
⚠️ **GitHub.com Fallback** ⚠️