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

Minor formatting issue (tool bar)

9 Answers 227 Views
Editor
This is a migrated thread and some comments may be shown as answers.
James Hood
Top achievements
Rank 1
James Hood asked on 18 Jul 2013, 05:58 PM
There seems to be a pesky problem in this most recent release. It seems to have something to do with some icons on the toolbar collapsing/expanding.

I accept that I may be doing something wrong, or theres some other order I need to be putting the collapsing/expanding tools on the toolbar.

So i'd like some advice, is there a way around this issue?

for instance the unlink doesnt appear (it used to mind you) unless you already have inserted a link into the editor, in which case the tool bar grows.

Is there a way I can arbitrarily say "ok after this many icons, drop down to the next line"?

that way i'd just place all the collapsing ones (especially the createTable one) on a second line by itself


$("#editor").kendoEditor({
    tools: [
     "bold",
     "italic",
     "underline",
     "strikethrough",
            {
                name: "fontName",
                items: [].concat(kendo.ui.Editor.prototype.options.fontName[8], [{ text: "Arial", value: "Arial" }, { text: "Verdana", value: "Verdana" }]),
            },
            {
                name: "fontSize",
                items: [].concat(kendo.ui.Editor.prototype.options.fontSize[0], [{ text: "13px", value: "13px" }, { text: "15px", value: "15px" }])
            },
            "formatting",
            "foreColor",
            "backColor",
            "superscript",
            "subscript",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "createLink",
            "unlink",
            "viewHtml",
            "createTable",
            "addRowAbove",
            "addRowBelow",
            "addColumnLeft",
            "addColumnRight",
            "deleteRow",
            "deleteColumn"]
});

9 Answers, 1 is accepted

Sort by
0
James Hood
Top achievements
Rank 1
answered on 18 Jul 2013, 06:00 PM

$(
"#editor").kendoEditor({
    tools: [
     "bold",
     "italic",
     "underline",
     "strikethrough",
            {
                name: "fontName",
                items: [].concat(kendo.ui.Editor.prototype.options.fontName[8], [{ text: "Arial", value: "Arial" }, { text: "Verdana", value: "Verdana" }]),
            },
            {
                name: "fontSize",
                items: [].concat(kendo.ui.Editor.prototype.options.fontSize[0], [{ text: "13px", value: "13px" }, { text: "15px", value: "15px" }])
            },
            "formatting",
            "foreColor",
            "backColor",
            "superscript",
            "subscript",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "createLink",
            "unlink",
            "viewHtml",
            "createTable",
            "addRowAbove",
            "addRowBelow",
            "addColumnLeft",
            "addColumnRight",
            "deleteRow",
            "deleteColumn"]
});
0
James Hood
Top achievements
Rank 1
answered on 18 Jul 2013, 07:19 PM
Ok I managed (for now) to find a "proper" order that will allow the icons to be created and not skew off the editor.

basically I just copied the all tools section from the editor and put our custom stuff back in.

will it work forever? shoot who knows

                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull",
                "insertUnorderedList",
                "insertOrderedList",
                "indent",
                "outdent",
                "createLink",
                "unlink",
                "subscript",
                "superscript",
                "createTable",
                "addRowAbove",
                "addRowBelow",
                "addColumnLeft",
                "addColumnRight",
                "deleteRow",
                "deleteColumn",
                "viewHtml",
                "formatting",
    {
        name: "fontName",
        items: [].concat(kendo.ui.Editor.prototype.options.fontName[8], [{ text: "Arial", value: "Arial" }, { text: "Verdana", value: "Verdana" }]),
    },
{
    name: "fontSize",
    items: [].concat(kendo.ui.Editor.prototype.options.fontSize[0], [{ text: "13px", value: "13px" }, { text: "15px", value: "15px" }])
},
                "foreColor",
                "backColor"


clearly that part is input in the tool array 
0
James Hood
Top achievements
Rank 1
answered on 18 Jul 2013, 07:33 PM
Except that if I have a second editor on the page (using a different ID) the control then puts every icon I told it to create on a single line.

there has to be some sort of rhyme or reason here.
0
Alex Gyoshev
Telerik team
answered on 19 Jul 2013, 12:01 PM
Hello James,

As you have noticed, we have introduced a new rendering algorithm for the toolbar tools, and it appears that we have missed some scenarios while doing so. We are currently working on the problem and I will post an update when we have released an internal build that solves this issue.

The ability to break the toolbar at some point will also be introduced shortly (no more than a few days time).

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
James Hood
Top achievements
Rank 1
answered on 19 Jul 2013, 12:05 PM
Both will be a welcomed update for sure. 

I did pretty much narrow down that if you have more than one editor on a page it seems to format the tools correctly for one, but not any other.

i am using the editors in a tab strip, in case that matters.

I'll be eagerly awaiting an update, in the meantime i'll read over scheduler!
0
Alex Gyoshev
Telerik team
answered on 22 Jul 2013, 02:52 PM
Hello James,

The latest internal build addresses the issue with the groups, and introduces the "break" tool that breaks the toolbar:

$("#comments").kendoEditor({
    tools: [ "bold", "italic", "break", "createLink", "unlink" ]
});

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
James Hood
Top achievements
Rank 1
answered on 22 Jul 2013, 02:58 PM
Excellent! nice to get that feature.
0
Scott
Top achievements
Rank 1
answered on 25 Jul 2013, 06:11 AM
This doesn't seem to be working in the latest internal build v2013.2.722 as .k-row-break { display: block; } is being overridden

This internal build also causes a line wrap after the formatting tool in IE as seen in the attached screenshot
0
Alex Gyoshev
Telerik team
answered on 26 Jul 2013, 01:52 PM
Hello Scott,

Thank you for pointing this out. It has been fixed and will be available in the next internal build.

Regards,
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
James Hood
Top achievements
Rank 1
Answers by
James Hood
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Scott
Top achievements
Rank 1
Share this question
or