+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Add button to rich editor

Add button to rich editor

7 posts, 0 answered
  1. Ancuta Me
    Ancuta Me avatar
    43 posts
    Registered:
    26 Apr 2010
    26 Oct 2010
    Link to this post
    Hello,

    Could you please help me figure out how to add a button to the rich editor?
    Most important, I want to insert custom HTML code when that button is clicked.
    Is that possible?

    Thank you.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Oct 2010
    Link to this post
    Hello Ancuta,

    Please take a look at


    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Ancuta Me
    Ancuta Me avatar
    43 posts
    Registered:
    26 Apr 2010
    26 Oct 2010
    Link to this post
    Hello,

    The first one seems pretty simple and straightforward, what I do not see is where I could add the codebehind - I want the new button to appear on every instance of the rich editor.

    Thank you.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Oct 2010
    Link to this post
    Hello Ancuta,

    You have to map each external template you want to modify

    Kind regards,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Ancuta Me
    Ancuta Me avatar
    43 posts
    Registered:
    26 Apr 2010
    26 Oct 2010
    Link to this post
    Hi,

    I did map the template, I added

    <

     

     

    tool name="MySeparator" Text="Insert Separator" />

     

     in my EditorToolsFile.xml

    and

     

     

    <script type="text/javascript">

     

    Telerik.Web.UI.Editor.CommandList[

     

    "MySeparator"] = function (commandName, editor, args)

     

    {

    editor.pasteHtml(

     

    '<span style="width:200px;border: 1px dashed #bb0000;background-color: #fafafa;color: blue;"> ' + new Date() + ' </span>');

     

    };

     

     

    </script>

     


    in my ContentEditView.ascx

    I also updated  Telerik.Sitefinity.Configuration.ControlsConfig.xml like this:

    <

     

     

    viewSettings hostType="Telerik.Cms.Engine.WebControls.Admin.ContentItemEdit`1[[Telerik.Cms.Engine.WebControls.Admin.ContentItemsView, Telerik.Cms.Engine]]" layoutTemplatePath="~/Sitefinity/Admin/ControlTemplates/Generic_Content/ContentEditView.ascx" />

     




    Yet, when I click the button in the editor I get "The command MySeparator is not implemented yet."

    Any hint will help.

    Thank you
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    26 Oct 2010
    Link to this post
    Hello Ancuta,

    Please try using the code below

        <telerik:RadEditor
                        runat="server"
                        ID="Editor"
                        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
                        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                  
                        Skin="WebBlue"                    
                        NewLineBr="False"
                        Width="95%"
                        ContentFilters="EncodeScripts,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
                        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                        <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                        <CssFiles>
                            <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                        </CssFiles>
                        <Tools>
                        <telerik:EditorToolGroup>
                                <telerik:EditorTool Text="My Separator" Name="MySeparator" />
                        </telerik:EditorToolGroup>
                            
                        </Tools>
                    </telerik:RadEditor>
                    <script type="text/javascript">
     
                        Telerik.Web.UI.Editor.CommandList["MySeparator"] = function(commandName, editor, args) {
        editor.pasteHtml('<span style="width:200px;border: 1px dashed #bb0000;background-color: #fafafa;color: blue;"> ' + new Date() + ' </span>');
    };
     
                    </script>


    Greetings,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Ancuta Me
    Ancuta Me avatar
    43 posts
    Registered:
    26 Apr 2010
    26 Oct 2010
    Link to this post
    Hi Ivan,

    Thank you for your help.

    The problem was actually the template I was trying to map: I tried with ContentEditView.ascx when I actually needed GenericContentDesigner.

    Placing your conde in ContentEditView.ascx dind not help :)

    Ancuta
Register for webinar
7 posts, 0 answered