Sign in

Adding “aside” container tag to WYSIWYG & BLOCK post editors

  • This topic has 2 replies, 3 voices, and was last updated 1 month, 2 weeks ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6565
    Avatar photoshaun2k

    Hi,

    I wanted to have an <aside> container in my posts and found out that it was possible to add a  paragraph format by adding  custom formats  to the “customElements” in the theme’s config.json.

    Add to "customElements" in config.json
    ----------
    {
       label": "Aside block-right",
       cssClasses": "post__aside",
       selector": "aside"
    }
    
    Custom css
    ----------
    .post__aside {
      margin-top: 1.7rem;
    }
    @media all and (min-width: 37.5em) {
      .post__aside {
        float: right;
        margin: 1.7rem 0 1.7rem 3.4rem;
        max-width: 40%;
        position: relative;
        z-index: 1;
      }
    }
    .post__aside > :nth-child(1) {
      margin: 0;
    }

    However, unlike the “Info”, “Highlight”, “Success” and “Warning” paragraph formats which worked on a <p> paragraph selector, the <aside> paragraph style works only if there was already a block of text marked out with <aside> and </aside> selectors. End result being <aside class=”post__aside”>

    My question is: how can we add <aside> as a block format like the “Pre”, “Code” or “Blockquote” paragraph blocks.

    Thanks

    #6579
    Avatar photoTomasz Dziuda

    Hi,

    You can try to override field:

    block_formats: ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre;Code=code;Blockquote=blockquote’,
    In the TinyMCE config – maybe it will help for your case

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8027
    Avatar photocandidexmedia

    Hi,

    You can try to override field:

    block_formats: ‘Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Address=address;Pre=pre;Code=code;Blockquote=blockquote’,
    In the TinyMCE config – maybe it will help for your case

    Hi Tomasz! How can I get this to work? I’ve consulted the “How to add custom config or JS for post editor?” page, “Changing user formatting controls” and Content Formatting. I’ve tried editing the tinymce.script.js and tinymce.override.json located in the theme root, to no avail. Adding customElements for the Editor in config.json was a breeze, but adding custom HTML tags is proving to be very difficult…

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.