Are you talking about images in TinyMCE?

I usually change the XHtmlString to a replaced version by parsing it with HtmlAgilityPack.

Then you need to connect the replaced text from view model with content model, ex:

            var editHints = ViewData.GetEditHints<ArticleLikePageViewModel, ArticlePage>();
            editHints.AddConnection(m => m.ReplacedMainBody, p => p.MainBody);

The code itself would look sth like this:

        public XhtmlString FixXhtmlText(XhtmlString xhtmlString)
        {
            if (xhtmlString != null)
            {
                var doc = new HtmlDocument();
                doc.LoadHtml(xhtmlString.ToHtmlString());

                var images = doc.DocumentNode.SelectNodes("//img");

                if (images != null && images.Any())
                {
                    foreach (var image in images)
                    {
                        var src = iframe.Attributes["src"].Value;

                        var replacedImg = $"<img something something />";

                        var replacedImgNode = HtmlNode.CreateNode(replacedImg);

                        var parent = image.ParentNode ?? doc.DocumentNode;
                        parent.ReplaceChild(replacedImgNode, image);
                    }
                }

                var outerHtml = doc.DocumentNode.OuterHtml;
                return new XhtmlString(outerHtml);
            }

            return null;
        }

BR,
Marija

Hello Marija, 

Thank you for your reply. Yes, I am talking about images in the TinyMCE. I have seen users drop an image in the main editor of the TinyMCE as well as use the insert/edit image button. 

Following your guidelines, I created a ContentBlockController and added the following code:

            ViewData.GetEditHints<ContentBlockVm, ContentBlock>()
                .AddConnection(m => m.Html, m => m.Editor);

Then I added a ContentBlockVmFactory to house the core logic:

        public XhtmlString FixText(XhtmlString xhtmlString)
        {
            if (xhtmlString == null)
                return null;

            var doc = new HtmlDocument();

            doc.LoadHtml(xhtmlString.ToHtmlString());

            var images = doc.DocumentNode.SelectNodes("//img");

            if (images != null && images.Any())
            {
                foreach (var image in images)
                {
                    var attributes = string.Empty;

                    foreach (var attribute in image.Attributes)
                    {
                        if (attribute.ToString() == "data-src")
                        {
                            attributes += " src=" + attribute.Value;
                        }
                        else
                        {
                            var value = attribute.Value == string.Empty ? " " : attribute.Value;
                            attributes += $" {attribute.Name}=\"{value}\"";
                        }
                    }

                    var replacedImg = $"<img {attributes} />";

                    var replacedImgNode = HtmlNode.CreateNode(replacedImg);

                    var parent = image.ParentNode ?? doc.DocumentNode;

                    parent.ReplaceChild(replacedImgNode, image);
                }
            }

            var outerHtml = doc.DocumentNode.OuterHtml;

            return new XhtmlString(outerHtml);
        }
    }

When I log into the CMS and select edit to view the home page, this code executes fine and does what I need it to do. However, when I click on any other page, this code doesn't execute again. Am I doing something wrong or do I need to hook into some other method? Thanks in advance. 

Scott