Enable embed scripts in the text editor

Hi!

I created a Content Editor Extension that renders script.src  code snippets from GitLab/Github.
Everything is fine when previewing, but after saving the text editor does not show the content.

The editor replaces a code with <span id="fragment-xx_status-content-xx">.

Can the editor be configured to display scripts?

  • Without knowing how you implemented the extension I cannot provide much guidance.   Are you outputting the script directly?

  • using System;
    using System.Collections.Generic;
    using System.Globalization;
    using System.Linq;
    using Telligent.DynamicConfiguration.Components;
    using Telligent.Evolution.Components;
    using Telligent.Evolution.Extensibility.EmbeddableContent.Version1;
    using Telligent.Evolution.Extensibility.Version1;
    
    namespace GitLabExtension
    {
        public class GitLabSnippet : IEmbeddableContentFragmentType, ITranslatablePlugin, IPlugin
        {
            readonly Guid _fragmentTypeId = new Guid("6c33babb0c0e45e8b691294b8b6569e6");
    
            ITranslatablePluginController _translation;
    
            #region IEmbeddableContentFragmentType Members
    
            public string ContentFragmentName
            {
                get { return _translation.GetLanguageResourceValue("fragment_name"); }
            }
    
            public string ContentFragmentDescription
            {
                get { return _translation.GetLanguageResourceValue("fragment_description"); }
            }
    
            public Guid EmbeddedContentFragmentTypeId
            {
                get { return _fragmentTypeId; }
            }
    
            bool IBaseEmbeddableContentFragmentType.CanEmbed(Guid contentTypeId, int userId)
            {
                return true;
            }
    
            PropertyGroup[] IEmbeddableContentFragmentType.EmbedConfiguration
            {
                get
                {
                    var group = new PropertyGroup("options", _translation.GetLanguageResourceValue("configuration_group"),
                        1);
                    group.Properties.Add(new Property("snippetId", _translation.GetLanguageResourceValue("configuration_snippetId"),
                        PropertyType.String, 1, ""));
                    return new PropertyGroup[] {group};
                }
            }
    
            void IEmbeddableContentFragmentType.AddUpdateContentFragments(Guid contentId, Guid contentTypeId,
                IEnumerable<IEmbeddableContentFragment> embeddedFragments)
            {
            }
    
            string IBaseEmbeddableContentFragmentType.PreviewImageUrl
            {
                get { return "https://assets.gitlab-static.net/assets/illustrations/golden_tanuki-a88ad492b973a0ea6be2316b12aeb3a76ee4e926b3b217dc26d01a57033c9948.svg"; }
            }
    
            string IEmbeddableContentFragmentType.Render(IEmbeddableContentFragment embeddedFragment, string target)
            {
                var id = embeddedFragment.GetString("snippetId");
    
                if (String.IsNullOrEmpty(id))
                    return String.Empty;
    
                return String.Format($"<script src=\"https://gitlab.com/snippets/{id}.js\"></script>");
            }
    
            EmbeddableContentFragmentValidationState IEmbeddableContentFragmentType.Validate(
                IEmbeddableContentFragment embeddedFragment)
            {
                var snippetId = embeddedFragment.GetString("snippetId");
    
                if (string.IsNullOrEmpty(snippetId))
                    return new EmbeddableContentFragmentValidationState(false)
                        {Message = _translation.GetLanguageResourceValue("configuration_snippetIdinvalid")};
    
                return new EmbeddableContentFragmentValidationState(true);
            }
    
            #endregion
    
            #region IPlugin Members
    
            string IPlugin.Description
            {
                get { return _translation.GetLanguageResourceValue("fragment_description"); }
            }
    
            void IPlugin.Initialize()
            {
            }
    
            string IPlugin.Name
            {
                get { return _translation.GetLanguageResourceValue("fragment_name"); }
            }
    
            #endregion
    
            #region ITranslatablePlugin Members
    
            Translation[] ITranslatablePlugin.DefaultTranslations
            {
                get
                {
                    var translation = new Translation("en-us");
                    
                    translation.Set("fragment_name", "GitLab Snippet");
                    translation.Set("fragment_description", "Displays a GitLab Snippets content.");
                    translation.Set("configuration_group", "Options");
                    translation.Set("configuration_snippetId", "Snippet Id");
                    translation.Set("configuration_snippetIdInvalid", "Snippet Id must be provided.");
    
                    return new Translation[] {translation};
                }
            }
    
            void ITranslatablePlugin.SetController(ITranslatablePluginController controller)
            {
                _translation = controller;
            }
    
            #endregion
        }
    }

  • Have yo checked to see if its even requesting your JS and if there are JS errors?

  • Extension works in posts, but doesn't display embed content in comments

  • What does the embed script do? If it relies on something like document.write(), it would not work when rendered to the page after the page's initial rendering (as it would for comments).

    I also recommend validating the snippet ID or at least sanitizing it since currently any string will be rendered directly to the output HTML.

  • Do you have the ability to update that script to replace it's own <script /> tag, for example, to get the same effect without using document.write? document.write is generally not recommended for use (not just in Community) because its validity is sensitive to the rendering state.

  • I don't have such opportunity. I will exclude this extension by content type id from replies. One more question: is it possible to get a Content Type List in plugins?

  • Yes,

    <ul>
    #foreach($contentType in $core_v2_contentType.List())
        <li>$contentType.Id: $contentType.Name</li>
    #end
    </ul>