Customizing the Content Editor

Posted by Community Admin on 05-Aug-2018 12:51

Customizing the Content Editor

All Replies

Posted by Community Admin on 26-Aug-2015 00:00

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

demos.telerik.com/.../defaultvb.aspx

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

 

Posted by Community Admin on 27-Aug-2015 00:00

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
 

Posted by Community Admin on 10-Sep-2015 00:00

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>

 

 

Posted by Community Admin on 11-Sep-2015 00:00

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
 

Posted by Community Admin on 22-Feb-2016 00:00

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.

Posted by Community Admin on 24-Feb-2016 00:00

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
 

Posted by Community Admin on 24-Feb-2016 00:00

Thank you!

This thread is closed