How to wrap selected content in 2 tags by using a button in Sitecore Rich Text Editor

Question

I have a requirement where the authors want a button in RTE which can wrap selected text with a predefined html structure. E.g.

This is the Selected Text

Now we want a button/tool in Sitecore Rich Text Editor, on clicking on which, the select text gets wrapped as the following html markup.

<sometag class="some-class">
<p class="another-class">
This is the Selected Text
</p>
</sometag>

I have tried adding an option in the formatblock section of Sitecore but apparently it only supports single tag since it is paragraph styling.

I have also tried the insert snippet functionality but insert snippet inserts the whole structure to RTE. It does not wrap the pre-selected text in the snippet.

Please suggest if we can achieve this by any out of the box RTE functionality or if this is feasible.

Answer 1

It sounds like you need some kind of drop down button that will have the preformatted HTML you want to insert with your selected text? is that correct? You will need to add a custom button to the RTE.

I wrote a blog here on how to do that. However in your case you will need to get the selected text and insert. I would do a token for that and do a replace see code below.

Telerik.Web.UI.Editor.CommandList["InsertToken"] = function (commandName, editor, args) {
var val = args.get_value();
var seltext = args.getSelection.get_value();
editor.pasteHtml(val.replace("{seltextinsert}",seltext));
args.set_cancel(true);};

Let me know if you have any more questions.

Answer 2

You can try below two steps -

1. Use the anchor tag for the button

   

2. Use some styles to display this anchor tag as button

Hope these steps helps you!

Also, you can wrap all text in the anchor tag.