CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-editor
Sankar
Sankar

Reputation: 1292

kendo Editor with maximize and minimize control?

How can i use a kendo Editor with both maximize and minimize control.I try every controls in kendo site.but i can not fix this problem.

 <textarea id="Editordiv" class="inputfield" rows="10" cols="30" style="width:100%;height:500px" data-bind="kendoEditor:{ value:htmlData,tools: [ 'bold','italic','underline','strikethrough','justifyLeft','justifyCenter','justifyRight','justifyFull','insertUnorderedList','insertOrderedList','indent','outdent','createLink','unlink','insertImage','subscript','superscript','createTable','addRowAbove','addRowBelow','addColumnLeft','addColumnRight','deleteRow','deleteColumn','viewHtml','formatting','fontName','fontSize','foreColor','backColor']}"></textarea>

i need to add two more buttons for Editor maximize and minimization oftion. Anyone know let me...enter image description here

i try to click the maximize button..i want to show editor as full screen.Each item contains seperate div. thanks in advance..

Upvotes: 2

Views: 2767

Answers (1)

OnaBai
OnaBai

Reputation: 40917

You should define your custom tool. Something like:

$("#Editordiv").kendoEditor({
    tools: [
        {
            name: "maximize",
            tooltip: "Maximize",
            exec: function(e) {
                var editor = $(this).data("kendoEditor");
                editor.wrapper.css("height", "500px");
            }
        },
        {
            name: "restore",
            tooltip: "Restore",
            exec: function(e) {
                var editor = $(this).data("kendoEditor");
                editor.wrapper.css("height", "200px");
            }
        },
        'bold',
        'italic',
        'underline',
        'strikethrough'

And in the exec you set height and width.

See example here: http://jsfiddle.net/OnaBai/HFdEs/

Upvotes: 2

Related Questions