Rich Text Editor and how to add a custom button to Rich Text Editor – Sitecore

What is Rich text editor?
Rich Text editor is used for editing the content of the website.

It is tool through which the text us maintained in Rich Text Fields.

It can be used both in the Content Editor and the Page Editor.

 

How do we configure the Rich text editor?

Configuring the RTE involves 2 steps.

  1. Setup HTML editor profile
  2. Configuring the website to use this profile

Setup HTML editor profile

  • Login into Sitecore
  • Switch your database to core
  • Navigate to /sitecore/system/Settings/Html Editor Profiles
  • When you open for example the ‘Rich Text Full’ profile, you see a list of folders that contains items that can be buttons or contain items that support som of the buttons in the editor. These are the items that you want to delete or change to limit the functionality in the editor.
  • Try copying the “Rich Text Full” to “Rich Text XYZ” and try deleting the ‘Toolbar 3’ folder.

Configuring the website to use this profile:

Open your web.config and locate the setting HTMLEditor.DefaultProfile. Change the value to the name of your custom profile.

Adding a button to the Rich Text Editor Sitecore.

We recently were asked by an editor how to insert a YouTube video or Instagram Links. There is way to extend the Rich Text Editor with an additional buttons that can opened a dialog window you could paste the IFrame embed code into.

First create a button under/sitecore/system/Settings/Html Editor Profiles/Rich Text IDE/ Toolbar/Instagram or YouTube.

After creating the  button, Go to your solution create a .html page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert YouTube</title>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#YouTubeSubmit').click(function () {
var timestamp = new Date().getUTCMilliseconds();
var returnValue = '<div class="video_section"><div class="YouTube" id="yt' + timestamp + '">' +
'YouTube ID ' + $('#YouTubeID').val() +
'<script>addYouTubeRTEPlayer("yt' + timestamp + '", "' +
$('#YouTubeID').val() + '");<' + '/script></div></div>';
if (window.radWindow) {
window.radWindow.close(returnValue);
}
if (window.frameElement && window.frameElement.radWindow) {
window.frameElement.radWindow.close(returnValue);
}
});
});
</script>
</head>
<body>
<form>

Enter the YouTube video ID below: <br />

<input id="YouTubeID" type="text" style="width:400px" autofocus />
<br />
<br />
<input id="YouTubeSubmit" type="button" value="Submit" />
</form>
</body>
</html>

After this, create a .js file which uses the Telerik.Web.UI

Telerik.Web.UI.Editor.CommandList["YouTube"] = function (commandName, editor, args) {
scEditor = editor;
editor.showExternalDialog("........................../YouTube.html",
null, 600, 400, callback, null, "Insert YouTube", true, 46, false, true);
}

function callback(sender, returnValue) {
if (!returnValue) return false;
scEditor.pasteHtml(returnValue);
}

 

Now go back to your Sitecore Button item and in the click field replace with YouTube. And Now this add a button on the Rich Text Editor.

Rich Text Editor and how to add a custom button to Rich Text Editor – Sitecore

Leave a Reply

Your email address will not be published. Required fields are marked *