This is a migrated thread and some comments may be shown as answers.

Appending Toolbar Formatting Options with AngularJS

7 Answers 331 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Raymond
Top achievements
Rank 1
Raymond asked on 18 Feb 2015, 01:46 AM
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.

7 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 19 Feb 2015, 04:11 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Raymond
Top achievements
Rank 1
answered on 19 Feb 2015, 11:58 PM
Hi Alex,

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

Regards,

Ray
0
Alex Gyoshev
Telerik team
answered on 23 Feb 2015, 08:41 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Raymond
Top achievements
Rank 1
answered on 25 Feb 2015, 04:46 AM
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).
0
Accepted
Alex Gyoshev
Telerik team
answered on 25 Feb 2015, 01:35 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
priyanka
Top achievements
Rank 1
answered on 16 May 2017, 11:43 AM

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.

0
Nikolay
Telerik team
answered on 18 May 2017, 08:06 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Editor
Asked by
Raymond
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Raymond
Top achievements
Rank 1
priyanka
Top achievements
Rank 1
Nikolay
Telerik team
Share this question
or