Add custom tool

5 posts, 0 answers
  1. Ganzimaro
    Ganzimaro avatar
    3 posts
    Member since:
    Aug 2016

    Posted 27 Apr Link to this post

    Good time of day. While working with the editor, the task arose of adding an additional button to the editor. I re-read a lot of documentation but could not find a solution to the problem. In general, the essence of the question: how to make the button respond to the selected text, for example, the same "bold"?
  2. Petar
    Admin
    Petar avatar
    16 posts

    Posted 27 Apr Link to this post

    Hi Ganzimaro,

    Here is a sample StackBlitz demonstrating the desired behaviour - https://stackblitz.com/edit/angular-w6svqx?file=app/app.component.ts

    There are two key points here:

    1. We have to create a template reference variable for the <kendo-editor> like so:
      <kendo-editor #editor>
      </kendo-editor>
    2. Use an existing toolbar tool or a custom one and execute an editor command(using the exec method) on click like this:
      <kendo-toolbar>
          <kendo-toolbar-button text="Bold button" (click)="editor.exec('bold');">
          </kendo-toolbar-button>
      </kendo-toolbar>

    A full list of the supported editor commands can be found here - https://www.telerik.com/kendo-angular-ui/components/editor/api/EditorCommand/

    More info on how to implement custom editor tools can be found here - https://www.telerik.com/kendo-angular-ui/components/editor/tools/#toc-custom-tools

    I hope this helps. Please let me know if further assistance is needed.

    Regards,
    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Ganzimaro
    Ganzimaro avatar
    3 posts
    Member since:
    Aug 2016

    Posted 18 May Link to this post

    Maybe I explained a little wrong. Here I have a <key></key> block, is it possible to include it in the selected text by button, and that edit it?
    text: <p>test text 1</p>
    result: <p>test <key>text</key> 1</p>
  4. Ganzimaro
    Ganzimaro avatar
    3 posts
    Member since:
    Aug 2016

    Posted 19 May Link to this post

    or if it’s not possible, how in Angular 6+ to get the cursor position when clicking in the kendo editor
  5. Petar
    Admin
    Petar avatar
    16 posts

    Posted 20 May Link to this post

    Hello Ganzimaro,

    Thanks for the provided details. I will try to answer the questions in the order they have been asked:

    1. If my understanding is correct, the goal is to insert a custom tag inside the Editor. This however is not supported at the moment and there is no workaround with the current API. It is important to note that when the Editor encounters an unsupported tag(which is set through the [value] input or otherwise), this tag is removed along with all of its contents.
    2. Currently the Editor does not provide any way of retrieving the cursor position. However based on this StackOverflow thread I have created a sample StackBlitz app which shows how to get the cursor position - https://stackblitz.com/edit/angular-rfudnb?file=app/app.component.ts.

    If having any of these features as built-in is important for you, please consider submitting a feature request on our Feedback Portal:

    https://feedback.telerik.com/kendo-angular-ui

    We keep a close eye on it as it is one of our main indicators on what is in high demand. When a feature is highly requested, we adjust our priorities and work accordingly so it gets developed faster.

    I hope this helps. Please let me know if further assistance is needed.

    Regards,
    Petar
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top