Can I get only table service as separate component from rich text editor?

[Arul Lakshmanan]

Hi Team,

I want to add a table service alone in my project. So, Can I get it alone? If yes, make sure that user should not enter anything outside the table like entering text et.c,

[Revanth Krishnan]

Hi Arul, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “To use table only in Rich Text Editor and to prevent any other text entries outside table”. 

 

This can be achieved by using only the table plugin in the Rich Text Editor, and preventing the key entries if it is outside the table in the created event, 

 

Code Snippet: 

create() { 

    this.rteObj.inputElement.addEventListener("keydown", function(e){ 

      this.selection = new NodeSelection(); 

      this.range = this.selection.getRange(document); 

      var currentNode = this.range.startContainer.nodeName === "#text" ? this.range.startContainer.parentElement : this.range.startContainer; 

      var table = closest(currentNode, "Table") 

      if (isNullOrUndefined(table) || (!isNullOrUndefined(table) && table.nodeName !== "TABLE") ) { 

        e.preventDefault(); 

      } 

    }); 

  } 

  render() { 

      return (<div className='control-pane'> 

      <div className='control-section' id="rteTools"> 

        <div className='rte-control-section'> 

          <RichTextEditorComponent id="toolsRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; } 

          } toolbarSettings={this.toolbarSettings} created={this.create.bind(this)}> 

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

          </RichTextEditorComponent> 

        </div> 

      </div> 

 

    </div>); 

  } 

 

Sample: https://stackblitz.com/edit/react-9zz5ef-yifxjb?file=index.js 

 

Please refer the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[Arul Lakshmanan]

Hey, Thanks for the support it is working fine.

I have another query.
Is it possible to keep table create icon outside RichTextComponent or passing table creation value like row and column from outside RichTextComponent?

[Indrajith Srinivasan]

Hi Arul,  

 

Good day to you, 

 

We have validated your reported query. Yes, you can insert the table dynamically in Rich Text Editor using the executeCommand insertTable. The table will inserted based on the selection and number of rows and columns configured. We have also prepared a sample that tries to meet your requirements.

Sample: https://stackblitz.com/edit/react-9zz5ef-yjdlez?file=index.js

Please get back to us if you face any difficulties, 

 

Regards, 

Indrajith 

[Arul Lakshmanan]

Hey, Thanks for the update. I have tried your sample in stackblitz, but, getting errors.

Can you please share the code with our requirement? I will pass only rows: 4 and column: 4 to richtext table component from props. You have to get those values and insert table accordingly like 4X4 table. I don't want to insert table based on click event as mentioned  in your sample code.

Also, I want to get all data from richtext table component as JSON to update to db and then i will pass same JSON to richtext table component. It will display same as what I entered before.

[Arul Lakshmanan]

Hey team,

How to restrict user not to modify anything in table like readonly? I want to show already created table in my project with no edit access in table service in richtext component..

[Indrajith Srinivasan]

Hi Arul,

We are currently vaidating your reported queries and will update you with further details in two business days by 31st August.

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Arul,

We have further validated on your reported queries. 

 

Query 1: “ I have tried your sample in stackblitz, but, getting errors. I will pass only rows: 4 and column: 4 to richtext table component from props. You have to get those values and insert table accordingly like 4X4 table. I don't want to insert table based on click event as mentioned  in your sample code.” 

 

We have checked the sample shared and we couldn’t find any script issues in the sample. Yes, you can pass the table initially in the created event of the RichTextEditor with default 4*4 rows and columns. We have also modified the already shared sample. 

 

Sample: https://stackblitz.com/edit/react-9zz5ef-axaf8p?file=index.js 

 

Query 2: “I want to get all data from richtext table component as JSON to update to db and then i will pass same JSON to richtext table component. It will display same as what I entered before.” 

 

Yes, you can pass the html content as Json and also load the same Json data to Rich Text Editor. In the above shared sample, the following are configured. 

 

• Passing the Rich Text Editor value as Json.
• Loading the Json value in the Rich Text Editor.

 

Query 3: “How to restrict user not to modify anything in table like readonly? I want to show already created table in my project with no edit access in table service in richtext component..” 

 

You can restrict the table with edit access to the table service by using the CSS styles. Can you please check the above shared sample for reference. 

 

 

.e-rte-table { 

  pointer-events: none; 

  touch-action: none; 

} 

 

Can you please check the above solutions and let us know if it meets your requirements? 

 

Regards, 

Indrajith 

[Arul Lakshmanan]

Hi Team, 

Thanks for your support. It is working as expected. 

Can you please suggest how to achieve this? when I focus on a table cell then floating menu is appeared and it is disturbing while entering the data into the table. So, I want to see that floating menu icons as static menu instead of floating menu. So that I can enter the data into the table and I can apply the styles from static menu. 

[Indrajith Srinivasan]

Hi Arul, 

 

Good day to you, 

 

We have validated your reported query. In order to prevent the quicktoolbar when focusing, you can enable the showOnRightClick property in the quickToolbarSettings. If this property is enabled, you can open the quicktoolbar only on the right mouse click. We have also prepared a sample that tries to meet your requirements. 

 

Sample: https://stackblitz.com/edit/react-9zz5ef-odbj79?file=index.js  

 

API link: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/quickToolbarSettingsModel/#showonrightclick  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Arul Lakshmanan]

Thanks team. Working fine.

Can you please resolve one issue as follows? When I insert 4 tables one by one in a order list and then I removed table one by one. Finally, I am getting some 2X2 table with filled colour codes in it. Please find the attached document for reference.

Please let me know how to solve this issue.

Attachment: Table_refernce_b4332dae.zip

[Indrajith Srinivasan]

Hi Arul, 

 

Good day to you, 

 

We have validated your reported query. We have tried to reproduce the reported issue using the rich text Editor and unfortunately we couldn’t reproduce the reported issue. We have shared the ensured sample from our end using the package version 18.3.35. 

 

Sample: https://stackblitz.com/edit/react-rcdarc-omanqa?file=index.js  

 

Can you please share us the following details: 

 

• The Nuget version you are using ?
• Are you able to reproduce the reported issue in the above shared sample ?
• If possible, can you replicate the issue in the above sample and revert back to us ?

 

The above details will be helpful in further validating the reported issue, 

 

Regards, 

Indrajith 

[Arul Lakshmanan]

Hi Team, 

By using this component in react code, I am facing some issues in safari browser but working fine in chrome.

When we type on each cell of the table and use the table tool bar and floating editor tool bar. Nothing happens If I click on bold or change to Italic text in the table doesn't reflect the changes. 

Please let us know ASAP

[Indrajith Srinivasan]

Hi Arul, 

 

We have also checked the reported query, using the above shared sample in the safari browser which works fine. We have also shared the video demo, of the issue ensured scenario from our end using the already shared sample. 

 

Video demo: https://www.syncfusion.com/downloads/support/forum/156784/ze/RTE_TA~12118341008  

Can you please check the above video, and let us know if we miss any steps for reproducing the reported issue ? 

Regards, 

Indrajith 

[Arul Lakshmanan]

Hi Team,

Query 3: “How to restrict user not to modify anything in table like readonly? I want to show already created table in my project with no edit access in table service in richtext component..” 

 

You can restrict the table with edit access to the table service by using the CSS styles. Can you please check the above shared sample for reference. 

 

 

.e-rte-table { 

  pointer-events: none; 

  touch-action: none; 

} 

 

Can you please check the above solutions and let us know if it meets your requirements? 

Thanks for your above solution. I tried your solution and working fine in web. But, in mobile view, if there is a overflow in table content then nothing can scrollable because of making pointer-events: none.  So, I want non-editable for mobile also with scrollable. 

Can you please suggest on this how can I achieve this?

[Revanth Krishnan]

Hi Arul, 

 

 

Good day to you. 

 

 

We have validated your query “Restricting the edit access works fine in the web, but in mobile view the scrollable not working, because of `pointer-events: none` styles. I want non-editable table with scrollable”. 

 

The edit access for the table can be prevented differently without using the CSS style, by making the `contentEditable` as false for the table element and also prevent the quick toolbar open by setting the `cancel` argument as true using the `beforeQuickToolbarOpen` event in the Rich Text Editor. We have prepared a sample for your reference, 

 

Code Snippet: 

 

create() { 

    ... 

    ... 

    ... 

    this.rteObj.executeCommand("insertTable", { 

        row: 5, 

        columns: 5, 

        selection: this.selection 

    }); 

    var tabElem = this.rteObj.inputElement.querySelector(".e-rte-table"); 

    tabElem.setAttribute("contentEditable", false); 

} 

 

beforeQTOpen(args) { 

    if (args.targetElement.closest("table").tagName === "TABLE") { 

        args.cancel = true; 

    } 

} 

 

<RichTextEditorComponent id="toolsRTE" 

    ref={richtexteditor => { this.rteObj = richtexteditor; }} toolbarSettings={this.toolbarSettings} 

    created={this.create.bind(this)} beforeQuickToolbarOpen={this.beforeQTOpen.bind(this)} > 

</RichTextEditorComponent> 

 

Sample: https://stackblitz.com/edit/react-9zz5ef-47z8uc?file=index.js 

 

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

 

Regards, 

Revanth 

[Arul Lakshmanan]

Hi Arul, 

 

 

Good day to you. 

 

 

We have validated your query “Restricting the edit access works fine in the web, but in mobile view the scrollable not working, because of `pointer-events: none` styles. I want non-editable table with scrollable”. 

 

The edit access for the table can be prevented differently without using the CSS style, by making the `contentEditable` as false for the table element and also prevent the quick toolbar open by setting the `cancel` argument as true using the `beforeQuickToolbarOpen` event in the Rich Text Editor. We have prepared a sample for your reference, 

 

Code Snippet: 

 

create() { 

    ... 

    ... 

    ... 

    this.rteObj.executeCommand("insertTable", { 

        row: 5, 

        columns: 5, 

        selection: this.selection 

    }); 

    var tabElem = this.rteObj.inputElement.querySelector(".e-rte-table"); 

    tabElem.setAttribute("contentEditable", false); 

} 

 

beforeQTOpen(args) { 

    if (args.targetElement.closest("table").tagName === "TABLE") { 

        args.cancel = true; 

    } 

} 

 

<RichTextEditorComponent id="toolsRTE" 

    ref={richtexteditor => { this.rteObj = richtexteditor; }} toolbarSettings={this.toolbarSettings} 

    created={this.create.bind(this)} beforeQuickToolbarOpen={this.beforeQTOpen.bind(this)} > 

</RichTextEditorComponent> 

 

Sample: https://stackblitz.com/edit/react-9zz5ef-47z8uc?file=index.js 

 

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

 

Regards, 

Revanth 

Thanks Revanth. 

Your suggested code working fine as per my requirement.

Apart from that, Am facing huge delay in rendering the table data with image inserted in mobile web view.

Please note that In web it is loading as expected. But, In mobile web view, facing huge delay. We are using this table component for mobile app using web view.

I connected same WiFi for web and mobile to test. But, when data(no images) only then it is rendering very fast in both. but, when image inserted then huge delay in rendering in mobile app and same rendering quickly in web.

Why this delay happening only for mobile and  not for web? How to render quickly in mobile view?

[Indrajith Srinivasan]

Hi Arul, 

 

Good day to you, 

 

We have checked the reported query in mobile view and we couldn’t find any delay in the content loading. We have used the already shared sample, for ensuring the reported issue. 

 

Can you please share us the HTML table content, which takes time to load in the editor to check it from our end ? 

 

Regards, 

Indrajith