Appending Toolbar Formatting Options with AngularJS

6 posts, 1 answers
  1. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 17 Feb 2015 Link to this post

    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.
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Feb 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 19 Feb 2015 in reply to Alex Gyoshev Link to this post

    Hi Alex,

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

    Regards,

    Ray
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Feb 2015 Link to this post

    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!
     
  6. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 24 Feb 2015 in reply to Alex Gyoshev Link to this post

    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).
  7. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Feb 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready