More in this section
Categories
Bloggers
Blogs RSS feed

Add Custom Tool Buttons to the HtmlField RadEditor Toolbar

by User Not Found

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.

55 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
  24. Zon Apr 23, 2018
    I was really enthousiastic when this blog was presented. Of great interest to me to read. Zonnepanelen | Warmtepomp kopen | Airco
    | Airconditioning
  25. AGENCIA DETECTIVES PRIVADOS Apr 26, 2018
    thanks this is good blog.AGENCIA DETECTIVES PRIVADOS
  26. Ellena Apr 29, 2018
    hat an amazing and fantastic best whey protein powder post. I am bookmarking this for future keeping.
  27. Aquapura.be Apr 29, 2018
    I was cheerfull and happy enthousiastic when this blog was presented. Interesting stuff to read. Zwembaden Aqua Pura | Terrasoverkappingen | Le Bain D'or Zwembaden | Terrasoverkappingen TerrasPro | Aqua Pura zwembaden | Pergola's | Zonwering
    | Zwembaden | Pergola's Terraspro | Polypropyleen zwembad | TerrasPro pergola's | Zwembaden Le Bain D'or
    I was happy so enthousiastic with all the Interesting stuff to read hre. Zwembad aanleggen | Zwembad bouwen | TerrasPro Terrasoverkappingen |Zonnescreens | Zwembad op maat | Polypropyleen zwembaden
    I found this a very interesting and entertaining blogarticle to read.  Zwembaden
      
  28. DETECTIVE MADRID May 05, 2018
    Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work.DETECTIVE MADRID
  29. Roberto May 06, 2018
    Your website style is wonderful. This article is really excellent and informative, as well. Thanks! I am really happy to be here.. bamp light
  30. Atomic Design May 07, 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.Atomic Design
  31. Massagesalon-limburg.be May 07, 2018
    Thank you very much for this useful article. https://massagesalon-limburg.be/ likes it Erotische massage
    Howdy just wanted to give you a quick heads up Massage Limburg
    I am really glad I have found this information Striptease
    I like it what you formulated here. Erotische massages
  32. Jeboy May 07, 2018
    What a good and valuable blog you have here. Please update it more often coz this topic is one of my interest.  Thanks and have a blissful day!  TestoFuel Review
  33. Lee-Ann Food Blogger May 11, 2018
    Excellent blog you got there. Enjoyed the read. Its a enjoyable topic and I will be visiting again. Checkout my food blog - <a href="https://www.onlinefoodblog.com">https://www.onlinefoodblog.com</a>
  34. Lee-Ann Food Blogger May 11, 2018
    Excellent blog you got there. Enjoyed the read. Its a enjoyable topic and I will be visiting again. Checkout my food blog - https://www.onlinefoodblog.com
  35. Wordpresswebdeisgn.be May 12, 2018
    Great read up. Is there more coming on this subject? Greetings from https://wordpresswebdesign.be Wordpress webdesign
    Great effort on this subject. Is there more following on this subject? https://wordpresswebdesign.be
    https://wordpresswebdesign.be really admires what you achieved in this article. Great read up. Is there more coming out?. Wordpress webdesigner
    https://wordpresswebdesign.be likes you efforts on this subject. Wordpress website laten bouwen
    https://wordpresswebdesign.be what you wrote down this subject. Wordpress website
    Great read up. Is there more coming on this subject. Greetings from https://wordpresswebdesign.be Webdesign
    Wordpresswebdesign.be likes what you wrote down this subject. Greetings from https://wordpresswebdesign.be Wordpress website bouwer
  36. Warmtepompboiler.net May 14, 2018
    What an interesting piece of information you have provided here. Thank you from Warmtepompboiler.net Warmtepompboilers
  37. bomberman game May 15, 2018
    This one is good. keep up the good work!..bomberman game
  38. Sempris.be May 16, 2018
    Sempris.be really admires what you wrote down this subject.Webdesign
  39. DETECTIVES PRIVADOS MADRID May 17, 2018
    Good artcile, but it would be better if in future you can share more about this subject. Keep posting.DETECTIVES PRIVADOS MADRID
  40. alcemccws01 May 17, 2018
    Thank you for this task you have created and this precious data best male enhancement supplements
  41. MONIKA May 22, 2018
    Please share more like that.como ganhar seguidores no instagram
  42. MONIKA May 23, 2018
    Ganhar curtidas instagram gratis de um modo rápido, seguro é com o site Curtidas Grátis. O melhor site para ganhar curtidas e likes no Instagram.
  43. Zonnepanelen-centrale.be May 23, 2018
    I was lucky to have found this blog and I found this very interesting and entertaining to read. Thank you from www.soloya.be and https://zonnepanelen-centrale.be  Zonnepanelen | Warmtepompen | Warmtepompen 
  44. Airco-airconditioning.be May 23, 2018
    Airco-airconditioning.be Being able to get moe info on this topic here has been mindblogging to me.. Airco | Airconditioning | Airco prijs | Airco Antwerpen | Airconditioning AntwerpenAirco Limburg | Airconditioning Limburg
  45. MONIKA May 24, 2018
    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.2018 Cent Box - 2018 P penny
  46. MONIKA May 28, 2018
    Please share more like that.Email Security Malaysia
  47. MONIKA May 30, 2018
    Great info! I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have.Informáticos forenses Madrid
  48. Soloya.be Jun 05, 2018
    www.soloya.be was really enthousiastic when this blog was presented. Of great interest to me to read. Zonnepanelen | Zonnepanelen kopen | Zonnepanelen installateur | Warmtepomp kopen | Airco | Airconditioning | Airco installatie | Airco installateur
  49. Aquapura.be Zwembaden Jun 05, 2018
    Aquapura.be Zwembaden found this a very interesting and entertaining blogarticle to read. Zwembaden
    | Zwembaden Aqua Pura  
  50. Chape-braspenning.be Jun 05, 2018
    By accident this blog was here and reading it has been epic for Chape-braspenning.be . Chape | Chapewerken  | Vloerisolatie | Isolatiechape | PUR isolatie | Akoestische vloerisolatie

    Leave a comment