Scrollbar is keep going back to the top.

[Kyung-hyun Roh]

When I pasting some large image files It's vertical scrollbar moving back to the top always.

I want to fix my scrollbar at the cursor position.

How can I do it?

Video Link: https://youtu.be/Ezg_Pqq2vyE

[Vinitha Jeyakumar]

Hi Kyung,

We have checked the video attached and tried to replicate the reported issue at our end. but unfortunately, we didn't face any issues as you reported. we have also prepared a sample and video illustration for your reference.

Sample: https://stackblitz.com/edit/uyemea?file=index.html

Video illustration: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_ImgTop959945762c

Can you please check the reported issue using the latest version and if still issue persists at your end, please share the details below

• Your package version.
• Exact issue reproducing steps.
• Issue reproducing entire code snippet.
• If possible please share us with the runnable issue reproducing sample.

Regards,

Vinitha

[Kyung-hyun Roh]

I checked it and it has some other problem on my app.

But I have an question.

Is it possible to scroll down automatically accordingly it's cursor position when I pasting image.

[Revanth Krishnan]

Hi Kyung,

We have validated your requirement and your requirement, to scroll down automatically when an image is pasted in the Rich Text Editor can be achieved by using the “scrollIntoView” method with respective to the pasted image in the “imageUploadSuccess” event. We have prepared a sample for your reference.

Code Snippet:

<template>

  <div>

    <ejs-richtexteditor :toolbarSettings="toolbarSettings" :insertImageSettings="insertImageSettings" :imageUploadSuccess="imageUploadSuccessEvent">

    </ejs-richtexteditor>

  </div>

</template>

 

<script>

import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, Table, QuickToolbar, PasteCleanup, } from "@syncfusion/ej2-vue-richtexteditor";

 

export default {

  . . .

  methods: {

    imageUploadSuccessEvent: function (args) {

      args.element.scrollIntoView();

    },

  },

  data() {

    return {

      insertImageSettings: {

        saveUrl: https://ej2.syncfusion.com/services/api/uploadbox/Save,

        removeUrl: https://ej2.syncfusion.com/services/api/uploadbox/Remove,

      },

      . . .

    };

  },

  provide: {

    richtexteditor: [ Toolbar, Link, Image, HtmlEditor, Table, QuickToolbar, PasteCleanup,],

  },

};

</script>

Sample: https://codesandbox.io/s/thirsty-chaum-w476uf

Please check the above code snippet, the sample, and the documentation, and let us know if it resolves the issue on your end.

Regards,

Revanth