Sitefinity 12.2 MVC- Add functionality to Kendo editor toolb

Posted by sitefinitylaura1 on 27-Dec-2019 16:32

I would like to be able to add a "button" style option to the kendo toolbar in sitefinity contentblock.

I am running v 12.2 MVC.

I created the project, created my resource package under resource packages, cloned sf-html-field.sf-cshtml and placed in ResourcePackages/mycustompackage/client-components/fields/html-field/ and as a test I deleted the Bold option. Note: The template I am using is based on one under my resource package in MVC/Views/Layouts. - It did not change the toolbar in the content block. I also changed it under the Bootstrap4 folder, and in addition I created /client-components/fields/html-field/ in the root and added the sf-html-field.sf-cshtml there and still no luck in making Bold disappear. I have also tried including the js file present in the frontend feather git repository.

I have also found a config.json file under AdminApp that had values for the toolbar and removed bold, but it still did not disappear from the toolbar.

I have also tried creating the ContentBlock under ResourcePackages/mycustompackage/MVC/Views/ContentBlock, included the designerview.contentblock.json with the priority, and still no luck.

I have tried rebuilding the project, restarting the app. Any help would be much appreciated. Links where I have looked for documentation include

https://github.com/Sitefinity/mvc-samples/tree/master/CustomStylesContentBlock https://github.com/Sitefinity/mvc-samples/tree/master/SimpleContentBlock https://www.progress.com/documentation/sitefinity-cms/extend-the-html-field-of-the-rich-text-editor https://github.com/Sitefinity/feather-widgets/issues/1240 https://knowledgebase.progress.com/articles/Article/mvc-link-selector-anchor-for-internal-pages

All Replies

Posted by jread on 02-Jan-2020 21:54

The AdminApp/config.json is the correct location to modify how the Kendo editor behaves.  If you want to add some bootstrap buttons to the formatting dropdown the config file will end up looking like the one below.  Keep in mind if you want the default options like H1-6 you they must be included in the JSON array items.  Also notice this replaces the default "formatting" from the JSON structure.

{
  "editorSettings": {
      "pasteCleanup": {
          "all": false,
          "css": true,
          "keepNewLines": false,
          "msAllFormatting": false,
          "msConvertLists": true,
          "msTags": true,
          "none": false,
          "span": true
      },
      "resizable": {
          "content": true,
          "toolbar": true
      },
      "serialization": {
          "semantic": true
      },
      "immutables": true,
      "tools": [
		{
			"name": "formatting",
			"items": [
				{
					"text": "Heading 1",
					"value": "h1"
				},
				{
					"text": "Heading 2",
					"value": "h2"
				},
				{
					"text": "Heading 3",
					"value": "h3"
				},
				{
					"text": "Heading 4",
					"value": "h4"
				},
				{
					"text": "Heading 5",
					"value": "h5"
				},
				{
					"text": "Heading 6",
					"value": "h6"
				},
				{
					"text": "Button Primary",
					"value": ".btn btn-primary"
				},
				{
					"text": "Button Success",
					"value": ".btn btn-success"
				}
			]
		},
          "bold",
          "italic",
          {
              "name": "insertUnorderedList",
              "tooltip": "Unordered list"
          },
          {
              "name": "insertOrderedList",
              "tooltip": "Ordered list"
          },
          "indent",
          "outdent",
          "createLink",
          {
              "name": "unlink",
              "tooltip": "Remove link"
          },
          "insertImage",
          "embed",
          "createTable",
          "addRowAbove",
          "addRowBelow",
          "addColumnLeft",
          "addColumnRight",
          "deleteRow",
          "deleteColumn",
          "justifyLeft",
          "justifyCenter",
          "justifyRight",
          "subscript",
          "superscript",
          "horizontalRule",
          "tableWizard",
          "cleanFormatting",
          "html"
      ],
      "stylesheets": [
      ]
  }
}

Posted by sitefinitylaura1 on 02-Jan-2020 22:15

Thank you. That worked for adding an additional tag with a custom class, however I need to be able to also add a font size, font color, and font family selector that came default with the toolbar in the classic interface. How do I include these? And how do I customize the link selector modal to add a class to the links?

Posted by jread on 02-Jan-2020 22:42

If you want to add a class to links the user would highligh the link after they create it then select a class to apply as style ...

Since this is a Kendo editor if you REALLY REALLY(I don't typically recommend) want them to change fonts you can add the different options to the tools array in the above json.config file, restart app to show changes.

"fontName",//Font family

"fontSize", //Font Size

"foreColor",  //Font Color

"backColor",  //Background color

Posted by sitefinitylaura1 on 02-Jan-2020 23:16

Excellent. You are on a roll :) If I wanted to modify the link modal in the future to add some custom field, how would I do that? I was able to do it in the classic interface using the client-components/selectors/tools/sf-link-selector.

And, would you also happen to know how I could change the rich text editor to enter a  br when I hit enter instead of the P tag?

Posted by jread on 03-Jan-2020 00:03

I don't have direct answers for those items directly.  I would recommend you open a thread for each of those topics and see if there are any other hits.

Posted by sunil.rathod on 20-Feb-2020 21:00

Hi! I tried pasting the same config in my AdminApp/config.json. However, the Kendo Editor in Content Block does not show the buttons. I also tried removing the bold tool from the json and still it appears on the Editor. Any Ideas why the changes in config are not showing up in Editor? I build, rebuild , cleared the cache of browser but still I was seeing no change. Any Idea what am I missing here?

Posted by laura@refactoredmedia.com on 20-Feb-2020 22:23

In order for that to work, you need to be using the new user interface, you can turn it on by going to Administration > Switch new interface on/off (at least in v 12 MVC). Note that this doesnt work in page templates, only in the modules that use the new interface. Isnt that wonderful? Another fantastic feature, I am sure. Anyways, in order to have those customizations available in the page templates and other places where they might be missing, you also have to override the sf-html-field www.progress.com/.../extend-the-html-field-of-the-rich-text-editor  You will want to get the sf-cshtml file from the github repo and put it in a client-components/fields/html-field folder in your resource package.  Dont forget you will also need to restart the app. An easy way to do this from the CMS is to go to Settings > User authentication  & click save changes (without changing the dropdown). Or you can just leave the new interface off and update the client components html field

Posted by sunil.rathod on 20-Feb-2020 22:55

Thanks a ton!! You were right at point! It works when I modify the  sf-cshtml in resource package folder but not if I created the same structure in the root of the application as mentioned in the link here https://github.com/Sitefinity/mvc-samples/tree/master/BoldlessContentBlock . Anyways, but the tip on restarting the App is cool!! 

Thanks Again!!

Posted by Ryan Kanawyer on 28-Feb-2020 00:05

Hey all, I am having issues with this as well.

I am using 12.1, have the new interface enabled, the whole site is built using MVC, and bootstrap4 resource package is being used. I updated the AdminApp\config.json file with what is shown below and then I saved changes to the user authentication for a full restart and yet it is still not updating the content blocks for pages. Any ideas as to why this is not working?

{
  "editorSettings": {
    "pasteCleanup": {
      "all": false,
      "css": true,
      "keepNewLines": false,
      "msAllFormatting": false,
      "msConvertLists": true,
      "msTags": true,
      "none": false,
      "span": true
    },
    "resizable": {
      "content": true,
      "toolbar": true
    },
    "serialization": {
      "semantic": true
    },
    "immutables": true,
    "tools": [
      {
        "name": "formatting",
        "items": [
          {"text": "Paragraph", "value": "p"},
          {"text": "Quotation", "value": "blockquote"},
          {"text": "Heading 1", "value": "h1"},
          {"text": "Heading 2", "value": "h2"},
          {"text": "Heading 3", "value": "h3"},
          {"text": "Heading 4", "value": "h4"},
          {"text": "Heading 5", "value": "h5"},
          {"text": "Heading 6", "value": "h6"},
          {"text": "Test 1", "value": ".test1"}
        ]
      },
      "bold",
      "italic",
      {
        "name": "insertUnorderedList",
        "tooltip": "Unordered list"
      },
      {
        "name": "insertOrderedList",
        "tooltip": "Ordered list"
      },
      "indent",
      "outdent",
      "createLink",
      {
        "name": "unlink",
        "tooltip": "Remove link"
      },
      "insertImage",
      "embed",
      "justifyLeft",
      "justifyCenter",
      "justifyRight",
      "subscript",
      "superscript",
      "horizontalRule",
      "cleanFormatting",
      "html"
    ],
    "stylesheets": [
    ]
  }
}

Posted by gauntt@upenn.edu on 02-Mar-2020 21:22

If you go back to what was in the default/empty project does it work? Try doing that and then copy in each part you modified one at a time to see if something about what you are doing somewhere is causing the whole thing to be invalid and ignored.

Aside from that, the only thing you are doing that I am not in my file is under formatting, instead of indicating a base tag for the last one, you are indicating a custom class name:

{"text": "Test 1", "value": ".test1"}

That might not be valid to do that. Maybe delete that one line and see if everything else works? I see from the first answer that that should be possible...

Posted by gauntt@upenn.edu on 02-Mar-2020 21:27

Here's my file by the way, in case anyone wants to see how to add a list of foreColors, backColors, and a dropdown I called "InsertHtml" which is basically a code snippet dropdown.

{

   "editorSettings": {

       "pasteCleanup": {

           "all": false,

           "css": false,

           "keepNewLines": false,

           "msAllFormatting": false,

           "msConvertLists": false,

           "msTags": false,

           "none": true,

           "span": false

       },

       "resizable": {

           "content": true,

           "toolbar": true

       },

       "serialization": {

           "semantic": true

       },

       "immutables": true,

       "tools": [

           {

               "name": "formatting",

               "items": [

                   {

                       "text": "P-Tag",

                       "value": "p"

                   },

                   {

                       "text": "H1",

                       "value": "h1"

                   },

                   {

                       "text": "H2",

                       "value": "h2"

                   },

                   {

                       "text": "H3",

                       "value": "h3"

                   },

                   {

                       "text": "H4",

                       "value": "h4"

                   },

                   {

                       "text": "H5",

                       "value": "h5"

                   },

                   {

                       "text": "H6",

                       "value": "h6"

                   }

               ]

           },

           {

               "name": "insertHtml",

               "items": [

                   {

                       "text": "H2 Custom",

                       "value": "<h2 class=\"section__heading\"></h2>"

                   },

                   {

                       "text": "Callout Box",

                       "value": "<div class=\"BkGnd-Blue fore-LighterBlue\" style=\"text-align:center; padding:2.0rem; margin: 1.0rem 0 1.0rem 0;\"><h3 style=\"font-size:1.5rem;\"></h3></div>"

                   }

               ]

           },

           "bold",

           "italic",

           "underline",

           "justifyLeft",

           "justifyCenter",

           "justifyRight",

           {

               "name": "insertUnorderedList",

               "tooltip": "Unordered list"

           },

           {

               "name": "insertOrderedList",

               "tooltip": "Ordered list"

           },

           "indent",

           "outdent",

           "createLink",

           {

               "name": "unlink",

               "tooltip": "Remove link"

           },

           "insertImage",

           "embed",

           "horizontalRule",

           {

               "name": "foreColor",

               "palette": [ "#F1F9FF", "#000f3a", "#00144d", "#01256e", "#045ea7", "#82afd3", "#57000a", "#74000e", "#95001a", "#c2004d", "#e180a6", "#f2f2f3", "#e0e1e3", "#cfd0d2", "#bbbdc0", "#a8aaaf", "#94979d", "#7f8389", "#6c6f76", "#595c61", "#44464b", "#2e2f32", "#131315" ]

           },

           {

               "name": "backColor",

               "palette": [ "#F1F9FF", "#000f3a", "#00144d", "#01256e", "#045ea7", "#82afd3", "#57000a", "#74000e", "#95001a", "#c2004d", "#e180a6", "#f2f2f3", "#e0e1e3", "#cfd0d2", "#bbbdc0", "#a8aaaf", "#94979d", "#7f8389", "#6c6f76", "#595c61", "#44464b", "#2e2f32", "#131315" ]

           },

           "cleanFormatting",

           "html"

       ],

       "stylesheets": [

       ]

   }

}

Posted by Ryan Kanawyer on 02-Mar-2020 22:00

I tried using both what jread provided and what you provided but neither would work for me. The content block just looks like the out of the box one for the new interface and won't ever show any of my changes (or the changes the two of you provided). I have even tried to take the original file and remove the justifyCenter from the tools just to see if a small change like that would at least go through and nothing happens.

Am I correct when I say that updating the content block in the new interface just requires updating the AdminApp\config.json file and then doing a full restart of the application?

Is there anything else involved when changing the content block options in only the new interface?

Posted by Ryan Kanawyer on 17-Mar-2020 13:19

The cause for my problem was that the server (for some odd reason) did not have a mime type for JSON and thus a 404 error was being thrown when the system was trying to read the file.

This thread is closed