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

Forums / General Discussions / Content Block Editor - ToolsFile.xml

Content Block Editor - ToolsFile.xml

71 posts, 0 answered
  1. Richard
    Richard avatar
    63 posts
    Registered:
    20 Jan 2010
    18 Feb 2011
    Link to this post
    Hi all,

    I have looked through the various posts on this forum regarding using my own ToolsFile.xml with the RadEditor as I used to in v3.7 but for the life of me I cannot get it to work in v4.

    From the back end under Administration>Settings>Advanced>Appearance I initially replaced the StandardEditorConfiguration of "Telerik.Sitefinity.Resources.Themes.StandardToolsFile.xml" and MinimalEditorConfiguration of "Telerik.Sitefinity.Resources.Themes.MinimalToolsFile.xml" with the path to my ToolsFile.xml which resulted in the error:

    The file: "xxx.xml" in the assembly: "Telerik.Sitefinity.Resources, Version=4.0.1098.0, Culture=neutral, PublicKeyToken=null" was not found!

    I then replaced the original values back in and then went to Administration>Settings>Advanced>Appearance>EditorConfigurations and create two new entries of StandardEditorConfiguration & MinimalEditorConfiguration and in the value field I put the path to my ToolsFile.xml.

    When I then go to edit some content I still have the same options so it doesn't appear to be picking up the new settings.

    I'm not sure if I have missed something simple so apologies if I have but I would be greatful for any help.

    Many thanks
    Richard

  2. Richard
    Richard avatar
    63 posts
    Registered:
    20 Jan 2010
    19 Feb 2011
    Link to this post
    Resolved, I was missing:

    <appearanceConfig xmlns:config="urn:telerik:sitefinity:configuration" xmlns:type="urn:telerik:sitefinity:configuration:type" config:version="4.0.4042.33518">
      
     <editorConfigurations>
            <add value="xxx" key="xxx" />
        </editorConfigurations>
    </appearanceConfig>
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    21 Feb 2011
    Link to this post
    I cannot get this to work at all :)

    So this gives you a global change to the tools available in the editor?
  4. Richard
    Richard avatar
    63 posts
    Registered:
    20 Jan 2010
    21 Feb 2011
    Link to this post
    Hi Steve,
    This is what I have:

    Created a new folder called "Controls" in the root, added a user control of "ContentBlockDesignerTemplate.ascx" with the following code:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
      
    <sf:ResourceLinks id="resourcesLinks" runat="server">
        <sf:ResourceFile Name="Styles/Window.css" />
    </sf:ResourceLinks>
      
    <sf:FormManager ID="formManager" runat="server" />
    <div style="width: 660px; overflow: hidden;">
        <sf:HtmlField
            ID="htmlEditor"
            runat="server"
            Width="99%"
            Height="370px"
            EditorToolsConfiguration="Custom"
            EditorConfigurations="~/Controls/ToolsFile.xml"
            EditorToolsConfigurationKey="ToolsFile"
            DisplayMode="Write"
            FixCursorIssue="True">
        </sf:HtmlField>
    </div>
    <script type="text/javascript">
        $("body").addClass("sfContentBlockDesigner");
    </script>

    In the "Controls" folder added my "ToolsFile.xml" with the following for testing purposes:

    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <tools name="MainToolbar" enabled="true">
            <tool name="AjaxSpellCheck" />
            <tool name="Print" />
            <tool name="FindAndReplace" />
            <tool separator="true"/>
            <tool name="Cut" />
            <tool name="Copy" />
            <tool name="Paste" />
            <tool name="PasteFromWord" />
            <tool name="PastePlainText" />
            <tool name="PasteAsHtml"  />
            <tool separator="true"/>
            <tool name="Undo" />
            <tool name="Redo" />
            <tool name="ApplyClass"/>
        </tools>
    </root>

    Under App_data/Sitefinity/Configurations/ created "AppearanceConfig.config" with the following:

    <?xml version="1.0" encoding="utf-8"?>
     
    <appearanceConfig xmlns:config="urn:telerik:sitefinity:configuration" xmlns:type="urn:telerik:sitefinity:configuration:type" config:version="4.0.4042.33518">
     
        <editorConfigurations>
            <add value="~/Controls/ToolsFile.xml" key="ToolsFile" />
        </editorConfigurations>
    </appearanceConfig>

    Once logged into the administration side of Sitefinity go to:

    Administration>Settings>Advanced>Controls>ViewMap and create the following:

    HostType
    Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner

    LayoutTemplatePath
    ~/Controls/ContentBlockDesignerTemplate.ascx

    This will now remove the basic and advanced options from the RadEditor and only show what is in your ToolsFile.xml.

    Hope this helps
    thanks

    Richard

  5. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    22 Feb 2011
    Link to this post
    Thank you sir :)
  6. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    24 Feb 2011
    Link to this post
    In step one it appeared that you did this:

    "I then replaced the original values back in and then went to Administration>Settings>Advanced>Appearance>EditorConfigurations and create two new entries of StandardEditorConfiguration & MinimalEditorConfiguration and in the value field I put the path to my ToolsFile.xml."

    But then in your later post, you didn't mention it. Did you still need to do this step or not?

    Cool idea. Thanks. :-)
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    25 Feb 2011
    Link to this post
    Hello Dan,

    You should use the configuration

    <editorConfigurations>
            <add value="~/Controls/ToolsFile.xml" key="ToolsFile" />
        </editorConfigurations>


    Above the config file is changed directly in the config file, but this could be done through the UI >> Administration >> Settings >> Advanced.

    All the best,
    Ivan Dimitrov
    the Telerik team
  8. higgsy
    higgsy avatar
    336 posts
    Registered:
    05 Aug 2010
    26 Feb 2011
    Link to this post
    Hi guys,

    If you want to change the appearance of the Editor sitewide you can do the following:

    1) Create a user control for HtmlField.ascx, and copy the contents of the original HTML field control, below:
    Also make sure you remove the code-behind files.

    001.<%@ Control Language="C#" %>
    002.<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    003.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    004. 
    005.<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    006.    <Templates>
    007.        <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
    008.            <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
    009.            <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
    010.        </sf:ConditionalTemplate>
    011.        <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
    012.            <sf:ResourceLinks id="resourcesLinks2" runat="server">
    013.                <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />
    014.                <sf:ResourceFile Name="Styles/Window.css" />
    015.            </sf:ResourceLinks>
    016.            <asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" AssociatedControlID="editControl" />
    017.            <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
    018.            <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
    019.                <telerik:RadEditor
    020.                    ID="editControl"
    021.                    runat="server"
    022.                    Skin="Sitefinity"
    023.                    Width="100%"
    024.                    Height="550px"
    025.                    EnableResize="False"
    026.                    EditModes="Design,HTML"
    027.                    DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
    028.                    Content=""
    029.                    NewLineBr="False"
    030.                    StripFormattingOptions="Css,Font,Span"
    031.                    OnClientLoad="Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"
    032.                    OnClientPasteHtml="OnClientPasteHtml"
    033.                    OnClientCommandExecuting="OnClientCommandExecuting">
    034.                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
    035.                </telerik:RadEditor>
    036.                <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
    037.                <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
    038.            </asp:Panel
    039.            <script type="text/javascript">
    040.                /* <![CDATA[ */
    041.                 
    042.                var className = null;
    043.                var toRemove = false;
    044.                var handlersAdded = false;
    045. 
    046.                function OnClientPasteHtml(sender, args)
    047.                {
    048.                    var newContent = args.get_value();
    049.                    newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
    050.                    newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
    051.                    newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
    052.                    newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
    053.                    var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
    054.                    newContent = newContent.replace(regex, "");
    055. 
    056.                    newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");
    057.                    newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");
    058. 
    059.                    args.set_value(newContent);
    060.                }
    061. 
    062.                function OnClientCommandExecuting(editor, args) {
    063.                 
    064.                    var name = args.get_name();
    065.                    var val = args.get_value();
    066.                     
    067.                    className = "re" + args.get_commandName();
    068.                    if (editor.get_dialogOpener())
    069.                    {
    070.                        if (editor.get_dialogOpener()._container && !handlersAdded)
    071.                        {
    072.                            editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
    073.                            editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
    074.                            handlersAdded = true;
    075.                        }
    076.                    }
    077. 
    078.                    if (name == "MergeTags")
    079.                    {
    080.                        editor.pasteHtml(val);
    081.                        //Cancel the further execution of the command as such a command does not exist in the editor command list
    082.                        args.set_cancel(true);
    083.                    }
    084.                }
    085. 
    086.                function AddRemoveCSSClass(sender, args)
    087.                {
    088.                    var popupElement = sender.get_popupElement();
    089.                    if (!toRemove)
    090.                    {
    091.                        Sys.UI.DomElement.addCssClass(popupElement, className);
    092.                    }
    093.                    else
    094.                    {
    095.                        Sys.UI.DomElement.removeCssClass(popupElement, className);
    096.                    }
    097.                }
    098. 
    099.                /* ]]> */
    100.            </script>
    101.        </sf:ConditionalTemplate>
    102.    </Templates>       
    103.</sf:ConditionalTemplateContainer>

    There is one slight snag here, I had to remove lines 7-10 because there is a field called titleLabel which also exists on line 16. It is within a conditional template, however it still wouldnt compile for me - hopefully someone from Telerik can tell us how to get round this?

    2) Map the control in Admiistration > Settings > Advanced > Controls > ViewMap > Create new

    Enter Telerik.Sitefinity.Web.UI.Fields.HtmlField as the hosttype, and the full path to your HTmlField.ascx file.

    3) On the RadEditor tag within HtmlField.ascx set the ToolsFile property, and point it towards your StandardToolsFile.xml - I created one as below:

    01.<?xml version="1.0" encoding="utf-8" ?>
    02.<root>
    03.    <modules>
    04.        <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
    05.        <module name="RadEditorDomInspector" visible="true" />
    06.        <module name="RadEditorNodeInspector" visible="false" />
    07.        <module name="RadEditorHtmlInspector" visible="false" />
    08.    </modules>
    09.    <tools name="MainToolbar">
    10.        <tool name="Bold" shortcut="CTRL+B"/>
    11.        <tool name="Italic" shortcut="CTRL+I"/>
    12.        <tool separator="true"/>
    13.        <tool name="InsertOrderedList" />
    14.        <tool name="InsertUnorderedList" />
    15.        <tool separator="true"/>
    16.        <tool name="LinkManager" shortcut="CTRL+K"/>
    17.        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
    18.        <tool name="ImageManager" shortcut="CTRL+G"/>
    19.        <tool separator="true"/>
    20.        <tool name="AjaxSpellCheck"/>
    21.        <tool separator="true"/>
    22.        <tool name="PasteFromWord" />
    23.    </tools>
    24.    <tools>
    25.        <tool separator="true"/>
    26.        <tool name="Indent" />
    27.        <tool name="Outdent" />
    28.    </tools>
    29.    <tools>
    30. 
    31.        <tool separator="true"/>
    32.        <tool name="ForeColor"/>
    33.        <tool name="BackColor"/>
    34.    </tools>
    35.    <tools>
    36.        <tool name="InsertParagraph" />
    37.        <tool name="InsertSymbol"/>
    38.        <tool name="InsertHorizontalRule" />
    39.        <tool separator="true"/>
    40.        <tool name="Superscript" />
    41.        <tool name="Subscript" />
    42.        <tool separator="true"/>
    43.        <tool name="FormatStripper"/>
    44.    </tools>
    45.    <tools>
    46.        <tool separator="true"/>
    47.        <tool name="FormatBlock"/>
    48.    </tools>
    49.</root>

    4) Build.......and you're done. The RadEditor will appear differently throughout Sitefinity.

    Incidentally, I wanted to remove the "Toggle advanced formatting" options, because I felt the Editor had too many dangerous tools available - i.e. giving non-technical content editors access to flash, font-sizes, font-styles is just a disaster waiting to happen IMHO. So to get rid of the toogle advanced option I removed the following:

    HtmlField.ascx
    OnClientLoad="Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"

    StandardToolsFile.xml
    <tool name="ToggleAdvancedToolbars"/>

    It's not a perfect solution but its the best I've got at the moment. I hope Telerik will be more forthcoming with some better solutions for the RadEditor.

    Hope this helps.
    higgsy

  9. Dan Sorensen
    Dan Sorensen avatar
    256 posts
    Registered:
    13 Aug 2010
    08 Mar 2011
    Link to this post
    Does anyone know why it takes a while for these changes to take effect the first time? Is there some process that needs to be restarted or refreshed before the tools.xml takes over the default settings?
  10. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    09 Mar 2011
    Link to this post
    Hi Dan,

    Mapping the CotnentBlockDesigner will require to restart the application, otherwise the old configuration is still used. When you map the designer we do not make application restart which we do when you register a widget.

    All the best,
    Ivan Dimitrov
    the Telerik team
  11. Daniel
    Daniel avatar
    6 posts
    Registered:
    16 Aug 2012
    16 Mar 2011
    Link to this post
    I just make it a common practice to recycle the associated App Pool in IIS after any changes I make (source code or back-end alike). Only way to ensure i'm looking at a non-cached version.
  12. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    06 Apr 2011
    Link to this post
    Hi guys,

    What I want to achieve is to hide the:
    -  Advanced button,
    - The HTML link,
    - And the Editing options

    of the Generic content editor interface for a selected role of users.

    The rest of the users, I want them to see that.

    Is that possible?

    Thanks,
    Andrei
  13. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    06 Apr 2011
    Link to this post
    Hello Andrei,

    To hide advanced button you will need a custom control designer which is equivalent to a custom control. You can call the methods below inside InitializeControls of the designer.


                this.HideAdvancedMode = true;
                this.DisableAdvancedMode();

    To hide the HTML mode you have to get instance of the RadEditor and do this inside InitializeControls of the control designer you are going to use

    RadEditor1.EditModes = EditModes.Design | EditModes.Preview;


    The same applies for the editing options - you can remove some of the tools or change the tools file of the editor.

     RadEditor1.EnsureToolsFileLoaded();
     RemoveButton("FindAndReplace"); 
     RemoveButton("Cut");
     RemoveButton("Copy");
     RemoveButton("Paste"); 


    Greetings,
    Ivan Dimitrov
    the Telerik team

  14. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ok, so let me see if I get this:

    1 - Create a Custom Control that is the Generic Content control,
    2 - Inside the code make the changes you mentioned,
    3 - And then use it on the pages that can be seen by
    the user that I want to restrict.

    There is no way of editing a ToolsFile.xml like I was able to in Sitefinity 3.7
    and disable all the things from there for a given Role?

    In that case can I have a copy of the Generic Content Control please so
    that I do not have to create it from ground level up. That way I can just:
    - Modify it,
    - Register it in the ToolBox,
    - Drop it on the page,
    and that's it.

    Thanks Ivan,
    Andrei
  15. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    07 Apr 2011
    Link to this post
    Hello Andrei,

    In 3.x you should also have a custom code to load a tools file per role. So, the ContentBlock uses tools file, but it is not located in the solution. It is embedded into dlls. Since you want to make some more granularity related to who is allowed to use subset of tools , you have to modify the HtmlField control.
    If you are not looking for some specific features of  ContentBlock and respectively the wrapped HtmlFiel, you should better use the RadEditor control.

    What you can also try is mapping  template for CotentBlock control which contains the declaration of HtmlField control that wraps RadEditor control. Then add a C# script with Page_Load method. In the page load method you should set the value to HtmlField.Editor.ToolsFile. Since there are 3 nested controls RadEditor, HtmlField and ContentBlock you might need to use another event, like RadEditor.PreRender to apply your changes.

    Actually I will log a feature request about your requirement so we will try to enhance the HtmlField configurations and implement some permissions.



    All the best,
    Ivan Dimitrov
    the Telerik team

  16. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ivan,

    Option - 1
    I am looking at the RAD Editor and it does not look like it would meet my requirements.
    - I don't see how I would hide the HTML view only for a given role.
    - I don't see how I can hide the Tool Strips just for a given role.
    - Also, it seems that the only way to edit text is through the front-end not the back-end.

    Question: What do you mean by: "...you have to modify the HtmlField control..."

    Option - 2
    Mapping template for ContentBlock. That sounds more like it. I guess in the Page_Load
    event I could check the user's role and map the relevant template accordingly??? 

    I see two fields: 'LayoutTemplate' and 'LayoutTemplatePath' in the Content Block control.

    Would me creating this template and specifying it there work? 

    The problem is that I am not too up-to-speed with this whole process and so putting things 
    in a simpler way (step-by step) would help me greatly. 

    Thanks,
    Andrei
  17. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    07 Apr 2011
    Link to this post
    Hi Andrei,

    There are several lines of code, which are related to the RadEditor API, so  they show how to remove buttons or  set the RadEditor mode.

    LayoutTemplatePath will set the public template, but not the template of the control designer you need. Mapping the designer could be done from the configuration only.

    Regards,
    Ivan Dimitrov
    the Telerik team

  18. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ivan,

    This is turning into a pestering session, sorry about that. It is just that it's quite important that
    I get this working and my understanding about these things is not too great at the moment.

    "...There are several lines of code, which are related to the RadEditor API..."
    Which lines? Where? Are you implying that I can use the RAD Editor to edit text in the back-end
    and have it being displayed on the front-end as plain text?

    "...LayoutTemplatePath will set the public template, but not the template of the control designer you need..."
    Ok, I don't want to change the public template. I want to change the designer, so that's out.

    "...Mapping the designer could be done from the configuration only..."
    Would that change it then for everyone and every role? If yes, then not good either.

    Sorry, but I am still not following you. Can you break it down for me into steps. Assume I
    don't know much about Sitefinity 4.0. Perhaps a quick video or some code examples.

    Sorry about that and thanks for your help,
    Andrei
  19. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    Hi Andrei,

    I can give you a little example.

    LinkBoxDesigner.ascx :
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
     
    <sf:ResourceLinks id="resourcesLinks" runat="server">
        <sf:ResourceFile JavaScriptLibrary="JQuery" />
        <sf:ResourceFile Name="Styles/Window.css" />
    </sf:ResourceLinks>
     
    <sf:FormManager ID="formManager" runat="server" />
     
    <div style="width: 660px; overflow: hidden;">
     
        <sf:TextField
            ID="textEditor" 
            Width="99%"
            runat="server"
            DisplayMode="Write"
            Rows="1"
            Title="Box Title"
        >
            <ValidatorDefinition Required="true"
                                 ExpectedFormat="Custom"
                                 MessageCssClass="sfError"
            />
        </sf:TextField>
     
        <sf:HtmlField
            ID="htmlEditor"
            runat="server"
            DisplayMode="Write"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            EditorToolsConfiguration="Custom"
            EditorToolsConfigurationKey="LinkTools"
            FixCursorIssue="True"
            Height="550px"
            HtmlFieldEditModes="Design"
            Width="99%"
        />
     
    </div>
     
    <script type="text/javascript">
        $("body").addClass("sfLinkBoxDesigner");
    </script>

    LinkBoxDesigner.cs :
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI;
    using Telerik.Sitefinity.Web.UI.ControlDesign;
    using System.Web.UI;
    using Telerik.Web.UI;
    using System.Xml;
    using Telerik.Sitefinity.Configuration;
    using Telerik.Sitefinity.Web.Configuration;
    using Telerik.Sitefinity.Web.UI.Fields;
    using Telerik.Sitefinity.Web.Utilities;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
    using Telerik.Sitefinity.Libraries.Model;
     
    namespace Sitefinity.Box.Link
    {
        /// <summary>
        /// Designer control for the <see cref="LinkBox"/> control.
        /// </summary>
        public class LinkBoxDesigner : ControlDesignerBase
        {
            #region Properties
     
            /// <summary>
            /// Gets the name of the embedded layout template.
            /// </summary>
            /// <value></value>
            /// <remarks>
            /// Override this property to change the embedded template to be used with the dialog
            /// </remarks>
            protected override string LayoutTemplateName
            {
                get
                {
                    return LinkBoxDesigner.layoutTemplateName;
                }
            }
     
            #endregion
     
            #region Control references
     
            /// <summary>
            /// Gets the reference to the <see cref="HtmlField"/> control that is used
            /// for editing the HTML content of <see cref="LinkBox"/> control.
            /// </summary>
            protected virtual HtmlField HtmlEditor
            {
                get
                {
                    return this.Container.GetControl<HtmlField>("htmlEditor", true);
                }
            }
     
            /// <summary>
            /// Gets the reference to the <see cref="TextField"/> control that is used
            /// for editing the HTML content of <see cref="LinkBox"/> control.
            /// </summary>
            protected virtual TextField TextEditor
            {
                get
                {
                    return this.Container.GetControl<TextField>("textEditor", true);
                }
            }
     
            #endregion
     
            #region Overridden methods
     
            /// <summary>
            /// Initializes the controls.
            /// </summary>
            /// <param name="container"></param>
            /// <remarks>
            /// Initialize your controls in this method. Do not override CreateChildControls method.
            /// </remarks>
            protected override void InitializeControls(GenericContainer container)
            {
                base.DesignerMode = ControlDesignerModes.Simple;
                base.AdvancedModeIsDefault = false;
     
                if (this.PropertyEditor != null)
                {
                    this.HtmlEditor.UICulture = this.PropertyEditor.PropertyValuesCulture;
                }
            }
     
            /// <summary>
            /// Gets the script descriptors.
            /// </summary>
            /// <returns></returns>
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var scriptDescriptors = new List<ScriptDescriptor>(base.GetScriptDescriptors());
                var descriptor = (ScriptControlDescriptor)scriptDescriptors.Last();
     
                descriptor.AddComponentProperty("textEditor", this.TextEditor.ClientID);
                descriptor.AddComponentProperty("htmlEditor", this.HtmlEditor.ClientID);
     
                scriptDescriptors.Add(descriptor);
                return scriptDescriptors.ToArray();
            }
     
            /// <summary>
            /// Gets the script references.
            /// </summary>
            /// <returns></returns>
            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                string assembly = typeof(LinkBoxDesigner).Assembly.FullName;
                var scripts = new List<ScriptReference>(base.GetScriptReferences());
                var designerScript = new ScriptReference(LinkBoxDesigner.designerScriptName, assembly);
     
                scripts.Add(designerScript);           
                return scripts.ToArray();
            }
     
            protected override HtmlTextWriterTag TagKey
            {
                get
                {
                    //we use div wrapper tag to make easier common styling
                    return HtmlTextWriterTag.Div;
                }
            }
     
            #endregion
     
            #region Private fields
     
            private const string layoutTemplateName = "Sitefinity.Box.Link.Designers.LinkBoxDesigner.ascx";
            private const string designerScriptName = "Sitefinity.Box.Link.Script.LinkBoxDesigner.js";
     
            #endregion
        }
    }

    And the javascript files :
    Type.registerNamespace("Sitefinity.Box.Link");
     
    // ------------------------------------------------------------------------
    // LinkBoxDesigner class
    // ------------------------------------------------------------------------
    Sitefinity.Box.Link.LinkBoxDesigner = function (element) {
         
        this._propertyEditor = null;
        this._htmlEditor = null;
        this._textEditor = null;
     
        Sitefinity.Box.Link.LinkBoxDesigner.initializeBase(this, [element]);
    }
     
    Sitefinity.Box.Link.LinkBoxDesigner.prototype = {
     
        /* ************************* set up and tear down ************************* */
        initialize: function () {
            Sitefinity.Box.Link.LinkBoxDesigner.callBaseMethod(this, 'initialize');
        },
     
        dispose: function () {
            Sitefinity.Box.Link.LinkBoxDesigner.callBaseMethod(this, 'dispose');
        },
     
        /* ************************* public methods ************************* */
        applyChanges: function () {
         
            var textEditor = this._textEditor._editControl;
     
            if (textEditor) {
                textEditor.set_mode(1);
            }
     
            this.get_propertyEditor().get_control().HtmlTitle = this._textEditor.get_value();
     
            var editor = this._htmlEditor._editControl;
     
            if (editor) {
                editor.set_mode(1);
            }
     
            this.get_propertyEditor().get_control().Html = this._htmlEditor.get_value();
            }
        },
     
     
        refreshUI: function () {
            var texte = this.get_propertyEditor().get_control().HtmlTitle;
     
            if (texte) {
                this._textEditor.set_value(texte);
            }
             
            var html = this.get_propertyEditor().get_control().Html;
             
            if (html) {
                this._htmlEditor.set_value(html);
            }
        },
     
        /* ************************* properties ************************* */
        // gets the reference to the propertyEditor control
        get_propertyEditor: function () {
            return this._propertyEditor;
        },
        // sets the reference fo the propertyEditor control
        set_propertyEditor: function (value) {
            this._propertyEditor = value;
        },
     
        // gets the reference to the rad editor control used to edit the
        // html content of the LinkBox control
        get_htmlEditor: function () {
            return this._htmlEditor;
        },
        // gets the reference to the rad editor control used to edit the
        // html content of the LinkBox control
        set_htmlEditor: function (value) {
            this._htmlEditor = value;
        },
     
        // gets the reference to the rad editor control used to edit the
        // text content of the LinkBox control
        get_textEditor: function () {
            return this._textEditor;
        },
        // gets the reference to the rad editor control used to edit the
        // text content of the LinkBox control
        set_textEditor: function (value) {
            this._textEditor = value;
        }
    };
    Sitefinity.Box.Link.LinkBoxDesigner.registerClass('Sitefinity.Box.Link.LinkBoxDesigner', Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);

    It give you a example like the picture I attached (without the button).


    Regards,
    Nicolas
  20. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    I forgot a little part:

    xml configuration for tools :
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
      <tools name="MainToolbar" enabled="true">
        <tool name="LinkManager" shortcut="CTRL+K"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
      </tools>
    </root>

    And you have to register it in Settings >> Advanced >> Appearance >> EditorConfiguration

    Regards
    Nicolas
  21. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Nicolas,

    Thank you very much. 

     - So will I be able to reveal the HTML view depending on who is logged in?
     - Where does the XML file goes?
    - In EditorConfigurations do I enter:
    Key = LinkBoxDesigner  
    Value = SitefinityWebApp\Controls\LinkBoxDesigner.ascx

    Thanks,
    Andrei
  22. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    Hi,

    It's just the backend of the widget for editing content. For the moment I do not administer rights on the widget.

    On the frontend visible on page LinkBox.ascx :
    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sitefinity" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
     
    <ul class="linkBox">
     
        <li>
            <div class="lBoxTitle" runat="server">
                <asp:Literal ID="titleContentHtml" runat="server"/>
            </div>
        </li>
     
        <li>
            <div id="itemsContainer" runat="server">       
                 
                <asp:Literal ID="contentHtml" runat="server"></asp:Literal>
                <sf:BrowseAndEditToolbar ID="browseAndEditToolbar" runat="server" Mode="Edit"></sf:BrowseAndEditToolbar>
                     
            </div>
        </li>
     
    </ul>
     
    <sitefinity:Pager id="pager" runat="server"></sitefinity:Pager>

    And my class LinkBox.cs referencing LinkBoxDesigner like this :
    namespace Sitefinity.Box.Link
    {
        /// <summary>
        /// CoverFlow widget class that inherits from SimpleView that is registered in Sitefinity's toolbox.
        /// </summary>
        [ControlDesigner(typeof(LinkBoxDesigner))]
        public class LinkBox : SimpleView, ICustomWidgetVisualization, IBrowseAndEditable
        {
           .........
        }
    }

    For EditorConfiguration :
    Key=[MainClass] in my case LinkBox
    Value=[Tools.xml]

    Regards
    Nicolas
  23. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ok Nicolas,

    I am just playing with it now. Will let you know how I get on.
    Stay subscribed.

    Thanks,
    Andrei
  24. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Nicolas,

    I renamed the Control "BasicText" and placed it in the Controls folder.
    I have one entry under EditorConfigurations: ~/Controls/BasicText.ascx

    How do I get it on a page now in the way that your image shows?

    Cheers,
    Andrei
  25. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    Hi,

    Sorry I made a error in my explanation, for configuration in EditorConfigurations.

    In Designer.ascx parts you have :
    <sf:HtmlField
            ID="htmlEditor"
            runat="server"
            DisplayMode="Write"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            EditorToolsConfiguration="Custom"
            EditorToolsConfigurationKey="LinkTools"
            FixCursorIssue="True"
            Height="550px"
            HtmlFieldEditModes="Design"
            Width="99%"
        />

    LinkTools is the Key, it will refers to Tools.xml (I attached a picture).
    My widget is a custom control, the view on the first picture, it's backend administration of my widget.

    -------------------------------
    If you want only a User control, for modify backend design of ContentBlock it's a little more simpler ;-).

    You just have to register LinkBoxDesigner.ascx on Administration>Settings>Advanced>Controls>ViewMap
    HostType :
    Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
    LayoutTemplatePath :
    ~/Controls/LinkBoxDesigner.ascx

    And keep LinkTools.xml register in EditorConfigurations.

    But if you made this, the title not display on frontend.
    -------------------------------

    Regards
    Nicolas
  26. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ok, done that (see images). What next?

    Thanks,
    Andrei
  27. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    07 Apr 2011
    Link to this post
    Ok, I see. Now all my Content Blocks look as per the template.
    Now I need to find a way to switch between templates according to user privileges.

    Let me know if you have any ideas.

    Many thanks,
    Andrei
  28. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    If I'm not wrong, you can drag a ContentBlock in a page and when you edit it (in backend) you obtains designer form corresponding to the ascx register in "Administration>Settings>Advanced>Controls>ViewMap".

    I don't use this method but It's referenced in the thread and it seem works.

    Regards
    Nicolas
  29. Nicolas
    Nicolas avatar
    156 posts
    Registered:
    19 Jan 2011
    07 Apr 2011
    Link to this post
    I take my time to respond :-).

    You can in your LinkBoxDesigner.cs get your users rights.
    In LinkBoxDesigner.ascx :
    <sf:HtmlField
            ID="htmlEditor"
            runat="server"
            DisplayMode="Write"
            EditorContentFilters="DefaultFilters"
            EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists"
            EditorToolsConfiguration="Custom"
            EditorToolsConfigurationKey="LinkTools"
            FixCursorIssue="True"
            Height="550px"
            HtmlFieldEditModes="Design"
            Width="99%"
        />

    You can suppress HtmlFieldEditMode and manage it in LinkBoxDesigner.cs, if I'm not wrong it influences the behavior of input field but I don't really test.

    Regards,
    Nicolas
  30. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    08 Apr 2011
    Link to this post
    First I want to thank Nicolas & Andrei for blazing this trail.  I suspect this thread will end up helping a lot of people and, eventually, be converted into a "How To" guide.

    However, my question is less about "How?" and more related to "Why?".  If a customer wants to modify the ToolsFile.xml file then it means Sitefinity's default editor isn't suited to whatever they are trying to do.  Why?  I'm trying to figure out if there is a user story here that we need to act on.  Or is this a on-off customization that is not widely applicable?  Either way, we need to have a solution, but it's always ideal if Sitefinity simply does the right thing.

    As I look through this thread, I see the following user story:

    As a web site administrator, I want to prevent some backend editors (based on roles) from directly modifying the HTML used in the RichText editor.  Users that are prevented from modifying the HTML should not see the HTML option in RadEditor.  This will prevent editors from introducing HTML problems that might otherwise break the web site or create bad end-user experiences.

    Can you tell I've been spending too much time with TeamPulse?

    --

    Are there other user stories that we should be aware of related to this thread?  

    Gabe Sumner
    Telerik | Sitefinity CMS
71 posts, 0 answered
1 2 3