Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :

second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question

you can ask more detail if my question is confusing
thanks

Hello,

I would like to call a component that contains only the custom edit template (to create a new task or edit) for my scheduler.

I followed this solution but the edit window just displays "[Object object]"

The code of scheduler

The code of the method editTemplate()

The code of the component that contains the custom template

I think the problem comes from the method editTemplate but I don't undestand why.

Anyone can help me ?

Thanks.

I'm trying to export the html generated by the Kendo Vue Native Editor to a PDF document, using the Kendo Vue Native PDF Processing (I'm not using the Editor's embedded pdf export button, because I need to send this PDF to the backend).

I can't see any documentation about how to this. This is what I first tried:

const iframe = document.querySelector(".k-editor-content .k-iframe");
      const htmlElementContent = iframe.contentWindow.document.querySelector("html")

      savePDF(htmlElementContent, {
        paperSize: "A4"
      });

But then I got this error: "DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed."

To bypass this error, I tried to manipulate the Iframe content first:

const iFrameDocument = document.querySelector(".k-editor-content .k-iframe").contentWindow.document;
      const iFrameRootHtml = iFrameDocument.querySelector("html")
      const newSection = iFrameDocument.createElement('section');
      newSection.appendChild(iFrameRootHtml);
      iFrameDocument.appendChild(newSection);

      const newRoot = newSection.querySelector("html");

      savePDF(newRoot, {
        paperSize: "A4"
      });

With the above code I'm able to generate an PDF, but with no embedded fonts at all. Also, if I try to drag an image into the editor (the editor transforms it into a base64 string) and then generate the PDF, I got this error: "DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed."

Still regarding the fonts, I'm declaring them in the style section of the html that is inside the iframe content, using the onLoaded event of the Editor (https://www.telerik.com/kendo-vue-ui/components/editor/styling-content/). I'm also declaring them on the outer content (the main website). The fonts are hosted on my own website. Still, no embedded fonts on the generated PDF.

Also, to the Telerik forum admins, I just noted that there is no tag available neither for the Native Editor or the native PDF Processing, so I'm forced to tag this question with wrong/generic tags.

Any help will be appreciated, thanks in advance.

Hi,

I have the same question as this one.
https://www.telerik.com/forums/angular-kendo-editor-inside-kendo-tabstrip#login

When I have a kendo editor inside the kendo tabstrip, it seems cannot edit.

How can I do in Vue?

Here is the  Parent.vue , and I use components for each Tab.

 <k-tabstrip>
   <ul>
     <li class="k-state-active">Tab1</li>
     <li>Tab2</li>
   </ul>
   <div>
     <tab1 v-if="Object.keys(buildData.TAB_1).length >0" :data="buildData.TAB_1"></tab2>
   </div>
   <div >
     <tab2 v-if="Object.keys(buildData.TAB_2).length >0" :data="buildData.TAB_2"></tab1>
   </div>
 </k-tabstrip>

Here is code in Tab2 component.

<template>
    <div>
        <k-editor style="height:280px"></k-editor>
    </div>
</template>

How can I edit the  editor wrapper which is insinde the tabstrip wrapper in VUE?

Thanks a lot!!!!

Hello all, I am using Kendo Editor and have the below setup:

<editor :resizable-content="true"
                :resizable-toolbar="true"
                contenteditable="true"
                style="height:360px"
                rows="10"
                cols="30"
                v-model="editorBody"
                @input="setBodyOnChange"
                @keyup="setBodyOnKeyUp"
                @execute="setBodyOnExecute"
                @select="onSelect"
                ref="editor">
        </editor>

I would like to retrieve the cursor position when someone clicks in the editable area. Specifically I think I should use the select event. But I can't find a way to do so....

Any help would be appreciated.

Hi I'm usiong kendo editor and custom tools.

I have succeeded in creating a custom tool and attaching a method, but I wanted to put a fontawsome image in the tool,

so I tried following the guide below, but it doesn't work like the attached photo. Ask for help. Thank you.

Guide link :

http://dojo.telerik.com/AWUlef/6

 .k-editor .k-i-my-tool:before
  {
      font-family: FontAwesome;
      content: "\f0c7 ";
      font-size:16px;
  }

Hi All,

i need to disable the input of an Editor control in my vuejs project but seems that Kendo-Editor do not have a property like contenteditable/disabled/readonly i prefer not to deal with a layer of some z-index div to workaround this needs.

Is there any way (like the one with jquery to set the contenteditable to false) to achive this?

Thanks a lot

Hello all,

I am using kendo Editor.

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor">
            </editor>

This one is going to have the default toolbar set.

What I want to do is to add one more tool to the default toolbar set.

What I have noticed is that when I set the tools like below, it is overwriting the default toolbar and putting there only the tools I put in the tools property. So, is there a way to add or remove a specific tool without altering and overwriting all the others from default?

hi I am the user of Kendo-editor 

I  attach the kendo-editor on kendo-window

but when I make a Table I tried to resize but It does not work. I know that Other user already use this function.

Please give me an answer.  also this issue is make problem in Chrome , 

when I Click or Drag the Table ,Chrome gives a message like this

Uncaught TypeError: l.push is not a function
    at init.bind (kendo.all.js:134)
    at init.bind (kendo.all.js:117)
    at init._bindToResizeHandlesEvents (kendo.all.js:84051)
    at init._initResizeHandles (kendo.all.js:84023)
    at init.showResizeHandles (kendo.all.js:84003)
    at init._showTableResizeHandles (kendo.all.js:72692)
    at HTMLTableElement.<anonymous> (kendo.all.js:84103)
    at HTMLBodyElement.dispatch (jquery-2.2.4.min.js:3)
    at HTMLBodyElement.r.handle (jquery-2.2.4.min.js:3)