More in this section
Categories
Bloggers
Blogs RSS feed

Add Custom Tool Buttons to the HtmlField RadEditor Toolbar

by Josh Morales

In the previous post Supporting Shortcodes in Sitefinity Content, we looked at how you can leverage Sitefinity's support of code-behind in external templates to add simple shortcode helper for a YouTube video.

This time, we'll once again make use of external templates to add a custom tool button to the RadEditor in the HtmlField that will let users add the YouTube shortcode with a single click.

Modify the Sitefinity Text Editor

You can customize the buttons in the Text Editor in the Sitefinity settings under the Administration menu as shown below, and explained in more detail in the Sitefinity documentation: Text Editor.

 Sitefinity-Text-Editor-Configuration

Edit the Default tool set to add the toolbar to all the backend areas, and add an entry named YouTube to the list.

Sitefinity-Text-Editor-Custom-Tool

This adds the additional tool button to the editor, but its behavior and style still needs to be defined. To do that, we'll use the external template.

HtmlField Template and ViewMap

The HTML Editor in Sitefinity uses the HtmlField control to render, so it is this template we need to duplicate. Grab the template from the Sitefinity SDK (see this post for more information) and copy it to your project. Although this time, it's not required that you make a User Control (for code-behind), I usually do anyway, just in case it might be needed later.

Also, just like in the previous example, we need to map all instances of the field to this template, so our changes are automatically available across the site. In the Sitefinity ViewMap, and an entry for the HostType of Telerik.Sitefinity.Web.UI.Fields.HtmlField and point it to your template.

Sitefinity-HtmlField-ViewMap

Adding Custom Behavior with JavaScript

All that's left is to add a new custom JavaScript function that defines the behavior that the RadEditor should perform when the button is clicked.

More details and a complete sample of modifying the RadEditor is available in the Telerik ASP.NET Ajax documentation here: Adding Your Own Buttons.

Following that example, we'll simply define a new function on the template that prompts the user for the YouTube video ID.

 <script type="text/javascript">
        // custom toolbox item handler
        Telerik.Web.UI.Editor.CommandList["YouTube"] = function (commandName, editor, args) {
            var videoID = prompt("Enter the YouTube VIDEO ID only");
            if (videoID === "") return;

            // simple attempt to prevent user from pasting the full url
            if (videoID.indexOf("://") != -1) {
                alert("Please enter the video id only, not the full url.");
                return;
            }

            // insert the shortcode with the video id
            editor.pasteHtml(String.format("[youtube:{0}] ", videoID))
        };
    </script>

Because this is just plain JavaScript you can make this behavior as elaborate as necessary to support the desired behavior; in this case, I also added a simple check to prevent the user from accidentally entering the full Url.

Finally, we use the editor.pasteHtml() method to append the shortcode to the editor text.

Styling the Button

At this point our custom button is complete and ready to execute. However, it would be helpful to also display the YouTube icon on the button so users can identify it at a glance. For this I simply added a CSS file to the project, and referenced it by adding a ResourceLinks control to the HtmlField template:

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Extenders" TagPrefix="sf" %>
<sf:ResourceLinks ID="ResourceLinks1" runat="server" UseEmbeddedThemes="false">
    <sf:ResourceFile Name="~/Templates/HtmlField.css" />
</sf:ResourceLinks>

The CSS class for the button is taken from the Name property that we used when the tool was added to the configuration (in this case "YouTube"). By simply pointing this class to the image, we are able to show that icon.

.YouTube
{
    background: url('youtube.png')  no-repeat center top !important;
}

After saving your changes and building the project, you can now open up a content block editor and see a handy new YouTube shortcode button.

Sitefinity-Text-Editor-Custom-Tool-Button

Wrapping Up

The extensibility of the Text Editor in Sitefinity allows you to add any number of custom buttons and controls for your content authors, giving you customizability as well as control over the generated content.

Combining this feature with the previous post on Shortcodes allows you to offer a complete solution for easily adding rich content to your website.

In our final post on this topic, we'll take this one step further, and look at how you can create an even more powerful shortcode for linking to specific blog posts from anywhere on your site.

23 comments

Leave a comment
  1. For More Information About Contact Us Mar 29, 2018
    That is really nice to hear. thank you for the update and good luck.For More Information About Contact Us
  2. uy bitcoin offshore Mar 29, 2018
    It was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks.buy bitcoin offshore
  3. custom gold wedding bands Mar 29, 2018
    hello!! Very interesting discussion glad that I came across such informative post. Keep up the good work friend. Glad to be part of your net community.custom gold wedding bands
  4. Military flight travel Mar 29, 2018
    I'm glad to see the great detail here!.Military flight travel
  5. Retail advisor in Los Angeles Mar 29, 2018
    I really impressed after read this because of some quality work and informative thoughts . I just wanna say thanks for the writer and wish you all the best for coming!.Retail advisor in Los Angeles
  6. backyards Mar 29, 2018
    Please let me know if you’re looking for a article writer for your site. You have some really great posts and I feel I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some material for your blog in exchange for a link back to mine. Please send me an email if interested. Thank you! backyards
  7. ACCESSORI OLEODINAMICA Mar 29, 2018
    Thank you for some other informative website. The place else may just I get that kind of information written in such a perfect method? I have a venture that I am simply now running on, and I’ve been at the glance out for such info.ACCESSORI OLEODINAMICA
  8. nausea Mar 29, 2018
    Some truly wonderful work on behalf of the owner of this internet site , perfectly great articles .nausea
  9. Camilla And Marc Mar 29, 2018
    Awesome article! I want people to know just how good this information is in your article. It’s interesting, compelling content. Your views are much like my own concerning this subject.Camilla And Marc
  10. motorcyclesafer.com Mar 29, 2018
    Thanks for sharing the info, keep up the good work going.... I really enjoyed exploring your site. good resource...motorcyclesafer.com
  11. books Mar 29, 2018
    Only aspire to mention ones content can be as incredible. This clarity with your post is superb and that i may think you’re a guru for this issue. High-quality along with your concur permit me to to seize your current give to keep modified by using approaching blog post. Thanks a lot hundreds of along with you should go on the pleasurable get the job done.books
  12. pack n play rental Mar 29, 2018
    Thanks so much for sharing this awesome info! I am looking forward to see more postsby you!pack n play rental
  13. generator maintenance Mar 29, 2018
    What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much.generator maintenance
  14. etectives privados fuenlabrada Apr 02, 2018
    Thanks for the blog post buddy! Keep them coming...detectives privados fuenlabrada
  15. anna Apr 03, 2018
    Wow...!! This Post is so intriguing that now i want to know more about this topic. Waiting for your next Post..!! 10 best select
  16. david Apr 05, 2018
    thanks for information. kayak
  17. from Sacramento airport to Gold River Apr 09, 2018
    I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.from Sacramento airport to Gold River
  18. DETECTIVES MADRID Apr 11, 2018
    I really enjoyed reading this post, big fan. Keep up the good work andplease tell me when can you publish more articles or where can I read more on the subject?DETECTIVES MADRID
  19. DETECTIVES PRIVADOS SORIA Apr 16, 2018
    This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post!DETECTIVES PRIVADOS SORIA
  20. AGENCIA DETECTIVES MADRID Apr 17, 2018
    This type of message always inspiring and I prefer to read quality content, so happy to find good place to many here in the post, the writing is just great, thanks for the post.AGENCIA DETECTIVES MADRID
  21. Emma120 Apr 18, 2018
    This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ... good luck! 
    Apple Support UK Number 
  22. ΑΠΟΦΡΑΞΕΙΣ ΤΙΜΕΣ Apr 18, 2018
    Τα τελευταία χρόνια επεκτείναμε σταδιακά τις δραστηριότητες μας εκτός τις Αποφράξεις αποχετευτικών αγωγών και εκκενώσεις βόθρων, τώρα αναλαμβάνουμε υπεύθυνα απολυμάνσεις κτηρίων και έκδοση κοινοχρήστων, θέλοντας να προσφέρουμε ολοκληρωμένες υπηρεσίες στις κτηριακές ανάγκες.αποφραξεις
  23. Gespoten kurk Apr 21, 2018
    Great things you’ve always shared with us. Just keep writing this kind of posts.The time which was wasted in traveling for tuition now it can be used for studies.ThanksGespoten kurk

    Leave a comment