SyncFusionRichTextEditor - how to remove image insert icon.

[Viji Palanisamy]

Hi,

I need to implement a toolbar using Syncfusion components. However, I would like to know how to customize the toolbar to remove the image icons while keeping the text or other elements intact. I noticed that if I remove the image from the toolbar configuration, it disables the image upload functionality, which is not the desired outcome.

[Yaswin Vikhaash Rajaretenam]

Hi Viji Palanisamy,

We have reviewed your query and would like to inform you that simply removing the image item from the toolbar will not disable the image upload functionality. If you're encountering this issue, please ensure that the image module is correctly injected into the Rich Text Editor to maintain image-related functionality. Without injecting the image module, the image upload and related features will not work as expected. Please let us know if you need any further clarification or assistance.

Regards,

Yaswin Vikhaash

[Viji Palanisamy]

Hi Yaswin Vikhaash,

Thank you for your response regarding the image upload functionality in the Rich Text Editor. I have updated my code and attached the current version for your review.

I would like to clarify a few points:

1. I have injected the image module into the Rich Text Editor and removed the image option from toolbarSettings, which has achieved my requirement.
2. How can we restrict the copy-paste action using shortcuts for images within the editor?
3. My requirement is to completely restrict image uploads from this editor.

Looking forward to your guidance.

Best regards,
Viji Palanisamy

import React, { Component } from 'react'

import SyncFusionRichTextEditor from './SyncFusionRichTextEditor'

const toolBarSettings = {

    items: [

        'Bold',

        'Italic',

        'Underline',

        '|',

        'Formats',

        'Alignments',

        'OrderedList',

        'UnorderedList',

        '|',

        'CreateLink',

        '|',

        'SourceCode',

        'Undo',

        'Redo',

    ],

}

class HTMLTextEditor extends Component {

    render() {

        return (

            <SyncFusionRichTextEditor

                width={this.props.width || 735}

                height={this.props.height || 200}

                enabled={this.props.enabled}

                onChange={this.props.onChange}

                saveInterval={this.props.saveInterval || 300}

                toolbarSettings={toolBarSettings}

                value={this.props.value || ''}

            />

        )

    }

}

export default HTMLTextEditor

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar } from '@syncfusion/ej2-react-richtexteditor'

import React, { Component } from 'react'

import './syncFusionStyle.css'

class SyncFusionRichTextEditor extends Component {

    render() {

        return (

            <RichTextEditorComponent

                width={this.props.width}

                height={this.props.height}

                enabled={this.props.enabled}

                ref={richTextEditor => {

                    this.rteObj = richTextEditor

                }}

                change={() => {

                    this.props.onChange(this.rteObj.value)

                }}

                saveInterval={this.props.saveInterval}

                toolbarSettings={this.props.toolbarSettings}

                value={this.props.value || ''}

                enableHtmlSanitizer

            >

                <Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar, Table]} />

            </RichTextEditorComponent>

        )

    }

}

export default SyncFusionRichTextEditor

[Yaswin Vikhaash Rajaretenam]

Hi Viji Palanisamy,

We have thoroughly reviewed your query and found a solution. To achieve complete prevention of pasting specific content, we recommend utilizing the Paste Cleanup feature. Within this feature, you can use the deniedTags attribute to restrict certain tags from being pasted. Additionally, we have binded the actionBegin event to prevent the drag-and-drop functionality, ensuring comprehensive control over the paste action.

By combining these approaches, you can effectively prevent images from being pasted. Please find the attached code and sample for your reference.

 

Sample: https://stackblitz.com/edit/react-qcefeq?file=index.js,index.html

Code

 

 

    function onActionBegin(args) {

        if (args.type === 'drop' || args.type === 'dragstart') {

          args.cancel = true;

        }

      }

    let pasteCleanupSettings = {

        deniedTags: ['img'], 

      };

 

   <RichTextEditorComponent 

                    actionBegin={onActionBegin.bind(this)}

                    pasteCleanupSettings={pasteCleanupSettings}>

Regards,

Yaswin Vikhaash

[Viji Palanisamy]

Thanks. It works as expected.

[Yaswin Vikhaash Rajaretenam]

Hi Viji Palanisamy

You're welcome! Please get back to us if you need any further assistance.

Regards,

Yaswin Vikhaash