How to Integrate Image Upload Toolbar in Javascript RichTextEditor?

This article will guide you through the process of creating a custom file upload modal using the RichTextEditor’s custom toolbar and File Uploader control. Integrating a custom image upload toolbar into a JavaScript RichTextEditor can enhance the user experience by providing a seamless way to upload and insert images directly into the editor.

Implementation Steps

1. HTML Structure

First, set up the HTML structure for the RichTextEditor and the custom toolbar dialog for image upload.

<div id="defaultRTE"></div>
<div id="customTbarDialog" style="display: none">
    <input type="file" id="fileupload" name="UploadFiles" />
</div>

2. RichTextEditor Configuration

Configure the RichTextEditor with a custom toolbar that includes a button for the custom uploader.

let defaultRTE = new RichTextEditor({
  toolbarSettings: {
    items: [
      'Bold',
      'Italic',
      'Underline',
      '|',
      'Formats',
      'Alignments',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      'Image',
      '|',
      'SourceCode',
      {
        tooltipText: 'Insert Image',
        template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%">' +
                  '<div class="e-tbar-btn-text" style="font-weight: 500;">Image Uploader</div></button>',
      },
      '|',
      'Undo',
      'Redo',
    ],
  },
  created: onCreate,
  actionComplete: onActionComplete,
});
defaultRTE.appendTo('#defaultRTE');

3. Dialog and Uploader Initialization

Initialize the Dialog and Uploader control within the onCreate function.

function onCreate() {
  // ... existing code ...
  let uploadObj = new Uploader({
    asyncSettings: {
      saveUrl: 'https://(hostedLink)/api/RichTextEditor/Save',
    },
    success: success,
  });
  uploadObj.appendTo('#fileupload');
  // ... existing code ...
}

4. Image Insertion on Upload Success

Handle the success event of the uploader to insert the uploaded image into the RichTextEditor.

function success(args) {
 if (defaultRTE.formatter.getUndoRedoStack().length === 0) {
       defaultRTE.formatter.saveData();
 }
  defaultRTE.executeCommand('insertImage', {
    url: 'https://hostedLink/' + 'Images/' + args.file.name,
    cssClass: 'rte-img',
  });
  defaultRTE.formatter.saveData();
  defaultRTE.formatter.enableUndo(defaultRTE);
  dialog.hide();
}

5. Server-Side Upload Handling

Implement the server-side logic to handle the file upload.

public void Save(IList<IFormFile> UploadFiles)
{
    long size = 0;
    try
    {
        foreach (var file in UploadFiles)
        {
            var filename = ContentDispositionHeaderValue
                            .Parse(file.ContentDisposition)
                            .FileName
                            .Trim('"');
            filename = _webHostEnvironment.WebRootPath + "\\images" + $@"\{filename}";
            size += file.Length;
            if (!System.IO.File.Exists(filename))
            {
                using (FileStream fs = System.IO.File.Create(filename))
                {
                    file.CopyTo(fs);
                    fs.Flush();
                }
            }
        }
    }
    catch (Exception e)
    {
        Response.Clear();
        Response.StatusCode = 204;
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
        Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
    }
}

Additional References

Conclusion

We hope you enjoyed learning about how to integrate a custom Image Upload Toolbar in RichTextEditor.

You can refer to our JavaScript Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Rich Text Editor example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)