Appending Toolbar Formatting Options with AngularJS

[Raymond]

I am attempting to append some styles to the "Format" option in the Editor Toolbar as follows;

01.$scope.editorTools = [
02.    {
03.        name: "formatting",
04.        tooltip: "Built-in styles",
05.        items: [].concat(
06.            kendo.ui.Editor.prototype.options.formatting[0], [
07.            { text: "Section Header", value: "h2" },
08.            { text: "Sub-Section Header", value: "h3" },
09.            { text: "Paragraph", value: "p" }
10.            ])
11.    }
12.];

The Editor in the HTML is;

01.<textarea id="txtNarrative" name="txtNarrative"
02.          class="form-control"
03.          ng-model="rptSectionText.narrative"
04.          ng-required="true"
05.          kendo-editor
06.          k-encoded="false"
07.          k-tools="editorTools"
08.          style="height: 400px;"
09.          stylesheets="['/Content/KendoEditor.css']">
10.</textarea>

The problem is I get the error "TypeError: Cannot read property '0' of undefined at new rfController (rfController.js:40)" which is line 6 in the code example above.

I tried adapting the code from http://www.telerik.com/forums/minor-formatting-issue-(tool-bar) but obviously I am doing something wrong.

Thanks in advance.

[Alex Gyoshev]

Hello Raymond,

Assuming that you intend to have only the three formatting items, use an array:

$scope.editorTools = [
    {
        name: "formatting",
        tooltip: "Built-in styles",
        items: [
            { text: "Section Header", value: "h2" },
            { text: "Sub-Section Header", value: "h3" },
            { text: "Paragraph", value: "p" }
        ]
    }
];

If that is not what you intend, please describe what you want to achieve.

Regards,
Alex Gyoshev
Telerik

 

 

[Raymond]

Hi Alex,

I also want to be able to append new formatting items to the existing items.

Regards,

Ray

[Alex Gyoshev]

Hello Raymond,

I'm afraid that I don't fully understand. If you need to append these items at initialization time, you can concatenate the arrays:

$scope.editorTools = [
    {
        name: "formatting",
        tooltip: "Built-in styles",
        items: [].concat(
            kendo.ui.Editor.prototype.options.formatting, [
            { text: "Section Header", value: "h2" },
            { text: "Sub-Section Header", value: "h3" },
            { text: "Paragraph", value: "p" }
        ])
    }
];

If you want to change these dynamically during editing, consider using the context configuration option -- it will show formatting items depending on the currently selected text (context). Otherwise, you would need to manually set the dataSource by finding the formatting drop-down on the page, as this behavior is not supported.

Regards,
Alex Gyoshev
Telerik

 

 

[Raymond]

Hi Alex,

Thanks for getting back to me.  Your assumption is correct, I am trying to append the items when initialising the editor.

I tried using the example you provided above however it resulted in the toolbar displaying a spinning icon and none of the toolbar items were displayed (see attached).

[Alex Gyoshev]

Hello Raymond,

Indeed, I'm sorry for misguiding you. The format options are stored in the legacy formatBlock option. You should use the following line instead:

items: [].concat(
            kendo.ui.Editor.prototype.options.formatBlock, [
            { text: "Section Header", value: "h2" },
            { text: "Sub-Section Header", value: "h3" },
            { text: "Paragraph", value: "p" }
        ])

Regards,
Alex Gyoshev
Telerik

 

 

[priyanka]

Hi Team,

Can any body please tell me, that I can add 'Ul' and 'Ol' as items in kendo.ui.Editor.prototype.options.formatBlock, example mentioned above ????

 

I wanted to have different kind of ordered and unordered list in Kendo web editor, for example square type of list and bullet type of list in my editor, can anybody please provide me any hint or help.

Currently I can have only bullet type of unordered list in my editor.

Thanks,

Priyanka Bhatia.

[Nikolay]

Hi Priyanka,

FormatBlock tool is not suitable for adding lists. You can implement a custom command which to execute editor's insertList command and set the type of the list. Here is a basic example: http://dojo.telerik.com/@nstoychev/AJufo/5.

Regards,
Nikolay
Telerik by Progress