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

Forums / Project Feather / Customizing the Content Editor

Customizing the Content Editor

7 posts, 0 answered
  1. Will
    Will avatar
    10 posts
    Registered:
    16 Mar 2011
    26 Aug 2015
    Link to this post

    Can the mvc content editor be modified like the RadEditor for ASP.NET AJAX?

    http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultvb.aspx

    Specifically we would like to add more items to the "paragraph"/formatting dropdown (h1, h2, h3, etc).

     

  2. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    23 Sep 2016
    27 Aug 2015
    Link to this post
    Hi Will,

    Thank you for contacting us.

    You can do this by modifying the html field template by going to Resource Packages -> YourPackage -> Client components -> Fields -> html-field -> sf-html-field.sf-cshtml. Feather uses the kendo editor rather than the RadEditor so it is easier to add custom tools. Please follow their documentation article about this here.

    I hope the above information helps. Please do not hesitate to get back to me if you need further assistance on this matter.

    Regards,
    Velizar Bishurov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Anthony
    Anthony avatar
    1 posts
    Registered:
    08 Jul 2014
    10 Sep 2015 in reply to Velizar Bishurov
    Link to this post

    Velizar - 

    I am trying to customize my ~/ResourcePackages/Bootstrap/client-components/fields/html-field/sf-html-field.html. I can only get so far. I would like to have a custom button or custom dropdown that will execute JavaScript, but I can't get that to work. Here is my code, any thoughts would be appreciated. 

    -Anthony

     

    <textarea id="editor" 
              style="height: 400px; "
              kendo-editor ng-model="sfModel"
              k-encoded="false"
              k-stylesheets='["~/App_Data/Sitefinity/WebsiteTemplates/COM/App_Themes/COM/Global/Layout.css"]',
              k-tools='[

              {
                name: "custom",
                exec: "myScript"     
                },

             { name: "formatting", width: 150, items: [
                    { text: "COM Clean", value: ".green-line" },
                    { text: "COM Green", value: ".banner-green" },
                    { text: "COM Normal", value: ".banner-red" }
                    ] 
              },

            "foreColor",
            "backColor",
            "bold",
            "italic",
            "underline",
            "trikethrough",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "createTable",
            "addColumnLeft",
            "addColumnRight",
            "addRowAbove",
            "addRowBelow",
            "deleteRow",
            "deleteColumn",
            "cleanFormatting",

        {
            name: "fullscreen",
            template: "<a class=\"k-button js-custom-tool custom-tool\" ng-click=\"toggleFullScreen()\"><span class=\"js-fullScreen glyphicon\"></span></a>"
        },

        {
            name: "htmlView",
            template: "<button class=\"k-button pull-right js-custom-tool\" ng-click=\"toggleHtmlView()\">\{\{htmlViewLabel\}\}</button>"
        }

        ]'>
    </textarea>

    <script type="text/javascript">
    function myScript(){
        alert("Success");
    }
    </script>

     

     

  4. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    23 Sep 2016
    11 Sep 2015
    Link to this post
    Hello,

    Here's a quick sample for this:

    <script>
        function change(evt) {
            console.log($(evt).val());
        }
    </script>
      
    <textarea id="editor" style="height: 340px;"
        kendo-editor="editorWidget" ng-model="sfModel"
        k-scope-field="editorWidget"
        sf-toggle-commands="strikethrough, justifyFull, subscript, superscript, fontName, fontSize, foreColor, backColor, print"
        k-encoded="false"
        k-stylesheets='[getPackageResourceUrl("/ResourcePackages/Bootstrap/assets/dist/css/styles.min.css")]',
        k-tools='[
        "formatting",
        "bold", "italic", "underline", "trikethrough",
        "justifyLeft", "justifyCenter", "justifyRight", "justifyFull",
        "insertUnorderedList", "insertOrderedList", "indent", "outdent",
        {
            name: "custom",
            template: "<select onchange=\"change(this);\"><option value=\"volvo\">Volvo</option><option value=\"saab\">Saab</option><option value=\"mercedes\">Mercedes</option><option value=\"audi\">Audi</option></select>"
        },
        {
            name: "createLink",
            template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openLinkSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertHyperlink)\"><span class=\"k-tool-icon k-createLink\">@(Res.Get<ClientComponentsResources>().InsertHyperlink)</span></a>"
        },
        "unlink",
        {
            name: "insertImage",
            template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openImageSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertImage)\"><span class=\"k-tool-icon k-insertImage\">@(Res.Get<ClientComponentsResources>().InsertImage)</span></a>"
        },
        {
            name: "insertFile",
            template: "<a href=\"\" class=\"k-tool k-group-start\" ng-click=\"openDocumentSelector()\" title=\"@(Res.Get<ClientComponentsResources>().InsertFile)\"><span class=\"k-tool-icon k-insertFile\">@(Res.Get<ClientComponentsResources>().InsertFile)</span></a>"
        },
        {
            name: "insertVideo",
            template: "<a href=\"\" class=\"k-tool custom-tool\" title=\"@(Res.Get<ClientComponentsResources>().InsertVideo)\" ng-click=\"openVideoSelector()\"><span class=\"glyphicon glyphicon-facetime-video\"></span></a>"
        },
        "createTable", "addColumnLeft", "addColumnRight", "addRowAbove", "addRowBelow", "deleteRow", "deleteColumn",
        "cleanFormatting",
        "strikethrough", "subscript", "superscript","fontName", "fontSize", "foreColor", "backColor", "print",
        {
            name: "showAll",
            template: "<a class=\"k-tool custom-tool show-all-button\" title=\"@(Res.Get<ClientComponentsResources>().AllTools)\" ng-click=\"toggleAllTools()\"><span class=\"glyphicon glyphicon-option-horizontal\"></span></a>"
        },
        {
            name: "fullscreen",
            template: "<a class=\"k-tool js-custom-tool custom-tool\" title=\"Fullscreen\" ng-click=\"toggleFullScreen()\"><span class=\"js-fullScreen glyphicon\"></span></a>"
        },
        {
            name: "htmlView",
            template: "<button class=\"custom-tool btn btn-default btn-xs pull-right js-htmlview js-custom-tool\" ng-click=\"toggleHtmlView()\">\{\{htmlViewLabel\}\}</button>"
        }
        ]'>
    </textarea>
      
    <sf-link-selector-modal id="linkSelectorModal"></sf-link-selector-modal>
      
    <div class="mediaPropertiesModal"
         template-url="{{mediaPropertiesDialog}}"
         modal
         size="normal"
         existing-scope="true"
         window-class="sf-designer-dlg sf-timespan-selector-dlg"
         dialog-controller="{{sfMediaPropertiesController}}">
    </div>

    Regards,
    Velizar Bishurov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  5. Alex
    Alex avatar
    2 posts
    Registered:
    01 Dec 2015
    22 Feb in reply to Velizar Bishurov
    Link to this post

    Is there an example available where the javascript function would insert html into the editor? Or even better where the function would prompt the user for some input text and then insert that text formatted with html into the editor?

    Thank you.

  6. Velizar Bishurov
    Velizar Bishurov avatar
    143 posts
    Registered:
    23 Sep 2016
    24 Feb
    Link to this post
    Hi,

    The following sample for the Kendo editor should help: http://dojo.telerik.com/@gyoshev/iFudI

    Regards,
    Velizar Bishurov
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  7. Alex
    Alex avatar
    2 posts
    Registered:
    01 Dec 2015
    24 Feb in reply to Velizar Bishurov
    Link to this post
    Thank you!
7 posts, 0 answered