Is there a way to use Unfiltered HTML+ within a blog post or any other type of publication?

Hi!

I was able to create a custom HTML, CSS and JS snippet using Unfiltered HTML+ as standalone block to create a custom accordion for some FAQs. Is there a way to use this custom HTML editor block within the text editor let's say for a Blog Post, or Wiki Post, for example? I am able to add it outside the blocks, but I was wondering if there is a way to allow certain pages to have custom HTML, CSS and JS in the text editor, but limited to the pages and sections we chose by adding the Unfiltered tool.

For instance - and you all know this, but when you add custom HTML or anything in the text editor, it just deletes it so I can't create a blog post with a custom accordion added to it. Also, is there away to use JS embedded in the Unfiltered+ block to interact with other page blocks element? For example, clicking on a link or element outside this custom block, would fire a JS function such as onclick, load certain content?

Please let me know if you need clarification on what I am trying to accomplish.

Thanks for your help.

Parents
  •   First of all, that accordion looks great! I haven't taken the time to do the same, but have encountered some use cases over time that could have been solved by something like that. It's on the long list of things to develop Slight smile

    I'm personally not very well-versed in JS, but have you explored building a custom embeddable ( Embeddables)? I would think that could contain the JS based on what you're describing. It might take a little more work to set up since it's not going to convert the HTML widget code directly, but it should be possible. 

    Another possible option, pulling an idea of embedded videos we have on some content on our site. Our marketing team uses Wistia (https://wistia.com/support/embed-and-share/media-on-your-website) to curate some of our videos. In Admin > Site > Syndication and SEO Options > Raw Header, I have the script, <script src="https://fast.wistia.net/assets/external/E-v1.js async></script>, and then in the body of a Blog/Wiki/etc, I insert the HTML via the post's source code, such as (specifically lines 5&6):

    <table style="background-color: #e8e8e8; margin-left: auto; margin-right: auto; overflow: visible; width: 100%;" border="0px" cellpadding="3px">
    <tbody>
    <tr>
    <td style="border-bottom: 0px solid #e8e8e8; padding: 2% 1% 2% 5%; width: 50%;">
    <div class="wistia_responsive_padding" style="padding: 57% 0 0 0; position: relative;">
    <div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;"><span class="wistia_embed wistia_async_jlvr9bhf70 popover=true popoverAnimateThumbnail=true videoFoam=true" style="display: inline-block; height: 100%; position: relative; width: 100%;"> </span></div>
    </div>
    </td>
    <td....
    ....
    </td>
    </tr
    </tbody>
    </table>

    (I'm not sure the table is necessary, but it helps me with keeping the video in the right spot and formatted properly within the container, so I'm leaving that extra code in case you use this and run into sizing issues)

    Sorry that it's not a complete answer, but I hope this provides some more brainstorming ideas!

Reply
  •   First of all, that accordion looks great! I haven't taken the time to do the same, but have encountered some use cases over time that could have been solved by something like that. It's on the long list of things to develop Slight smile

    I'm personally not very well-versed in JS, but have you explored building a custom embeddable ( Embeddables)? I would think that could contain the JS based on what you're describing. It might take a little more work to set up since it's not going to convert the HTML widget code directly, but it should be possible. 

    Another possible option, pulling an idea of embedded videos we have on some content on our site. Our marketing team uses Wistia (https://wistia.com/support/embed-and-share/media-on-your-website) to curate some of our videos. In Admin > Site > Syndication and SEO Options > Raw Header, I have the script, <script src="https://fast.wistia.net/assets/external/E-v1.js async></script>, and then in the body of a Blog/Wiki/etc, I insert the HTML via the post's source code, such as (specifically lines 5&6):

    <table style="background-color: #e8e8e8; margin-left: auto; margin-right: auto; overflow: visible; width: 100%;" border="0px" cellpadding="3px">
    <tbody>
    <tr>
    <td style="border-bottom: 0px solid #e8e8e8; padding: 2% 1% 2% 5%; width: 50%;">
    <div class="wistia_responsive_padding" style="padding: 57% 0 0 0; position: relative;">
    <div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;"><span class="wistia_embed wistia_async_jlvr9bhf70 popover=true popoverAnimateThumbnail=true videoFoam=true" style="display: inline-block; height: 100%; position: relative; width: 100%;"> </span></div>
    </div>
    </td>
    <td....
    ....
    </td>
    </tr
    </tbody>
    </table>

    (I'm not sure the table is necessary, but it helps me with keeping the video in the right spot and formatted properly within the container, so I'm leaving that extra code in case you use this and run into sizing issues)

    Sorry that it's not a complete answer, but I hope this provides some more brainstorming ideas!

Children
  • +1 on Alex's suggestion to use Embeddables.

    Content is filtered to prevent malicious markup from being included by implementing the restrictions defined by Content Filtering configuration. Embeddables provide a way (via privilege) to define unrestricted functionality (the Embeddable) that can be configured (via Embeddable configuration) in a safe way without exposing full/unrestricted markup and script support to content creators. 

    Progressive Enhancement would be another option

    If the script can be defined generally (included via an Unfiltered widget locked in a group/application/site footer, for example) such that, on HTML insertion or page load it could detect safe content that could be enhanced without direct script interaction (a wrapping class, an HTML element type, etc), the unique content-related data could be defined by the content creator and the privileged script included as part of the theme enhances that content with additional functionality when the script is available to run (note that the script would not affect, for example, email representations of the content).