How to add <picture> tag in Sitecore rich text editor

Question

My requirement is to customize Rich Text so that when an image is added to RTE, the image tag gets converted into a picture element example : Image tag

to

picture tag

so that responsive images in Sitecore rich text editor

How can we achieve this?

Answer 1

You can do that with some customizations. Follow these steps and try to update the OOTB logic.

Open the InsetImage Dialog XML using this path

wwwroot\<your-site-root>\sitecore\shell\Controls\Rich Text Editor\InsertImage\InsertImage.xml

You will see on this file that the code is written in Sitecore.Client DLL. Here is the reference.

<CodeBeside Type="Sitecore.Shell.Controls.RichTextEditor.InsertImage.InsertImageForm,Sitecore.Client"/>

When you extract the DLL and go to InsertImageForm class, you will find the code writtn on OnOK method like below.

MediaUrlBuilderOptions shellOptions = MediaUrlBuilderOptions.GetShellOptions();
shellOptions.Language = this.ContentLanguage;
string text = !string.IsNullOrEmpty(HttpContext.Current.Request.Form["AlternateText"]) ? HttpContext.Current.Request.Form["AlternateText"] : mediaItem.Alt;
Tag image = new Tag("img");
this.SetDimensions(mediaItem, shellOptions, image);
image.Add("Src", MediaManager.GetMediaUrl(mediaItem, shellOptions));
image.Add("Alt", StringUtil.EscapeQuote(text));
image.Add("_languageInserted", "true");
if (this.Mode == "webedit")
{
SheerResponse.SetDialogValue(StringUtil.EscapeJavascriptString(image.ToString()));
base.OnOK(sender, args);
}
else
SheerResponse.Eval("scClose(" + StringUtil.EscapeJavascriptString(image.ToString()) + ")");
this.SaveFolderToRegistry();

You need to override this method and then update your new Class and DLL reference in the InsertImage.xml file.

And it should work.

Refer this article for similar kind of customization.

https://aldrichdev.wordpress.com/2017/03/21/creating-a-dynamic-image-in-rich-text-fields/