Custom Tools for Kendo Editor

[Benjamin]

Would like to check on how to achieve the following

• Having a custom button/control to allow user to add a placeholder for youtube video with the following requirements, when in editor when show some short of placeholder where user can enter the youtube link. when displaying the content out on a page, the placeholder will become an iframe to show the video
• for image upload, how do i integrate to MS SQL Database such that all uploads will be saved to the DB, user will also be able to select image previously uploaded by other users

[Anton Mironov]

Hi Benjamin,

Thank you for the details provided.

To add a custom YouTube video placeholder tool in the Kendo UI Editor, you can define a custom tool that prompts the user for a YouTube link and inserts a placeholder element. On the display page, you can use JavaScript to convert these placeholders into actual YouTube iframes.

Custom YouTube Placeholder Tool Example:

$("#editor").kendoEditor({
  tools: [
    {
      name: "insertYouTube",
      tooltip: "Insert YouTube Video",
      exec: function(e) {
        var url = prompt("Enter YouTube URL:");
        if (url) {
          e.sender.exec("inserthtml", { value: `<div class="youtube-placeholder" data-url="${url}">YouTube Video Placeholder</div>` });
        }
      }
    }
  ]
});

When rendering content, use JavaScript to find .youtube-placeholder elements and replace them with iframes using the saved data-url.

Image Upload and Selection from MS SQL Database:

• To store images in MS SQL, configure your Editor's ImageBrowser to use custom server-side endpoints.
• Implement controller actions that handle image upload, saving the files to your database, and fetching a list of images stored by all users.
• When users open the ImageBrowser, show them the images from the database so they can select any previously uploaded image.

Example Workflow:

1. Set up the Editor's ImageBrowser transport to point to your custom endpoints for upload and listing.
2. In your backend (e.g., ASP.NET MVC), inherit from EditorImageBrowserController, override the necessary actions to save images to SQL and return them for browsing.
3. The Editor will display the images returned from your database, allowing users to select images uploaded by others.

You can see an example of using an image and adding a link in the following demo:

• https://demos.telerik.com/aspnet-core/editor

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik