Remove the grey border from the RichTextEditor

[Grant Symon]

I'm running the Rich Text Editor via CDN.  I've upgraded to 26.2.4 and I'm using Material3.

I'm pleased to see the BlockQuote button, which has an icon in Material3 26.2.4, but does NOT in 25.2.4 which I was using before.

HOWEVER!  I can no longer hide the Rich Text Editor's grey border.  It is not changed by Style = 'Border(or Outline) : none', which worked before in 25.2.4.

How can I remove this border/outline?

(Also .. I quite like the fluent2 theme, but it adds a background colour.  How do I remove the colour completely as well?)

[Grant Symon]

No suggestions??

[Vinothkumar Yuvaraj]

Hi Grant Symon,

Query 1 : “I'm pleased to see the BlockQuote button, which has an icon in Material3 26.2.4, but does NOT in 25.2.4 which I was using before.”

We have included the new quotation toolbar items in the Rich Text Editor toolbar in version 26.1.35. Please see the following release notes for your reference. If you want to remove that toolbar, you can use the toolbarSettings items property. Here is the documentation for your reference: https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/toolbar#toolbar-items

Additionally, you can customize the format toolbar by using the format property: https://helpej2.syncfusion.com/documentation/api/rich-text-editor/#format

Query 2 : “ It is not changed by Style = 'Border(or Outline) : none', which worked before in 25.2.4. How can I remove this border/outline?”

We would like to inform you that we have modified the DOM level changes in version 26.1.35. You can use the following style to set the border to none in the Rich Text Editor from version 26.1.35 or above. Please see the following sample for your reference.

index.html

 #defaultRTE.e-richtexteditor .e-rte-container {

                border: none;

            }

Sample : https://stackblitz.com/edit/ef957w-yvxpsm?file=index.js,index.html,package.json

Release Notes : https://ej2.syncfusion.com/javascript/documentation/release-notes/26.1.35?type=all#richtexteditor

Query 3 : “I quite like the fluent2 theme, but it adds a background colour.  How do I remove the colour completely as well?)”

You can use the following style to remove the background color of the Rich Text Editor content. Please see the following sample for your reference.

index.html

 #defaultRTE.e-richtexteditor .e-rte-container .e-rte-content , #defaultRTE.e-richtexteditor{

                background: none;

            }

Sample : https://stackblitz.com/edit/ef957w-rpycah?file=index.js,index.html,package.json

API Link : https://helpej2.syncfusion.com/documentation/api/rich-text-editor/#toolbarsettings

Regards,

Vinothkumar

[Grant Symon]

Thank you for the reply Vinothkumar and for the very helpful links and yes! ... I’m delighted that I can now have the Quotation AND also that I can include it in the Format button AND that I can edit the Format button menu, to include H5/H6. This is really useful!

Border …

Unfortunately border: none ; doesn’t work for me. I’ve already been using it for previous versions, where it DID WORK, but now it’s broken as I show in the screen-grab-video.

!important ...

There appears to be more than one issue with the Border. If you watch carefully, when I have ​25.2.4 set as the stylesheet the border is thin. What is apparent here, is that there are in fact 2 lines. Together, they appear to be a single, thicker line, but clearly there are 2. When I switch to using 26.2.4 and apply border:none; one of these 2 lines disappears HOWEVER, the other one remains. I’ve tried setting Outline to none, but it doesn’t change anything. In fact, I’m not even sure that there is an outline at all. Can you suggest what this 2nd line may be?

The screen-grab-video shows a simplified version of the code I’m using and I include it below in case you want to use it. Please feel free to correct any poor programming, or other errors, that you see. I’m not a programmer, so it’s likely to have faults. 😬

Many thanks for any further help you can offer.

Regards,

Grant

_____________________________________________________________

<!DOCTYPE html> <html lang="en"> <head>
<script src="https://cdn.syncfusion.com/ej2/26.2.4/dist/ej2.min.js" type="text/javascript"> </script>
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/26.2.4/material3.css" rel="stylesheet">
<link rel='nofollow' href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">


<style>
body { 
.e-rte-inline-popup{
min-width: 350px !important;
}
.e-rte-quick-popup{
max-width: 450px !important;
}


}
</style> </head> <body>
<script> "Syncfusion Licence" </script>

<div class="col-lg-8 control-section"  >
<div class="e-rte-container" style = 'border:none;' >
<div id="defaultRTE" style = 'border:none;'>  "HTML" </div>
</div>
</div>


<script>
var defaultRTE = new ej.richtexteditor.RichTextEditor({
        inlineMode: {
            enable: true,
            onSelection: true
},
toolbarSettings: {
            items: ['Formats', 'Bold', 'Italic', 'Underline', 'Strikethrough', 'FormatPainter', 'ClearFormat',  'Image' ]},
format: {
            width: 'auto'
        },
        saveInterval: 1,
        change: change,
        autoSaveOnIdle: true
    });
    defaultRTE.appendTo("#defaultRTE");
    function change(args){        
const textPlain = defaultRTE.getText();
const textHTML = defaultRTE.getHtml();
const jsonARR = { textPlain, textHTML };
FileMaker.PerformScriptWithOption ( 'RTE-DATA', JSON.stringify(jsonARR) , '5' );
    }
</script> </body> </html>

Attachment: GSymonvideograbSyncfusionBorderBug_c804c117.zip

[Grant Symon]

Ahhh ...

I've got it working, but I still needed 2 instances of border:none;

This is what works:

____________________________________________________

AND

____________________________________________________

____________________________________________________________

On the downside re the Format Menu ... when I add the Format Menu to get H5 and H6 as per https://helpej2.syncfusion.com/documentation/api/rich-text-editor/#format , it breaks Dropdown menus in the Toolbar.  They no longer 'drop down'.

Any suggestions?  Are there any examples of the code 'in context'?  (I'm always frustrated by 'snippets', because as a non-programmer, I never know where the 'snippets' are supposed to go. 🙁)

[Vinothkumar Yuvaraj]

Hi Grant Symon,

Thank you for reaching out.

Query 1: "I've got it working, but I still needed 2 instances of border”

It seems the border: none; style was not applied to the e-rte-container element directly by us. It is possible that this styling was added at the application level in your project. You can safely remove the second instances of border: none; if they are no longer needed.

Query 2: "On the downside re the Format Menu ... when I add the Format Menu to get H5 and H6 as per documentation, it breaks Dropdown menus in the Toolbar."

We have reviewed the issue you reported. To resolve the problem with the Format Menu breaking dropdown menus, you can adjust the format types list with text and value in your configuration. Below is a sample code snippet to help you implement this:

let defaultRTE: RichTextEditor = new RichTextEditor({

  inlineMode: {

    enable: true,

  },

  format: {

    default: 'Paragraph',

    width: '65px',

    types: [

      { cssClass: 'e-paragraph', text: 'Paragraph', value: 'P' },

      { cssClass: 'e-h1', text: 'Heading 1', value: 'H1' },

      { cssClass: 'e-h2', text: 'Heading 2', value: 'H2' },

      { cssClass: 'e-h3', text: 'Heading 3', value: 'H3' },

      { cssClass: 'e-h4', text: 'Heading 4', value: 'H4' },

      { cssClass: 'e-h5', text: 'Heading 5', value: 'H5' },

      { cssClass: 'e-h6', text: 'Heading 6', value: 'H6' },

    ],

  }

});

defaultRTE.appendTo('#defaultRTE');

You can also refer to this sample on StackBlitz for further assistance.

We will correct our documentation site and update the live link in any one of our upcoming releases.

Regards,
Vinothkumar

[Grant Symon]

Thank you for your reply Vinothkumar and I apologise for my slow reply, but I've had to spend quite a long time trying things out and then trying to understand what is happening and why. 

I have found that there are quite a lot of bugs in the 26.x.x vs of the RTE.  I don't know if this is due to my using inline or perhaps some other reason.

I incude a screen-grab-video, to try and illustrate some of the issues.  I have used extremely simple code.  I pasted the text using my every-day RTE code and choosing 'Clean'.  From there, I show what happens in 25.x.x, then what happens in 3 versions of 26.x.x code.  The code is added to as I progress.

( PLEASE NOTE:  In the video I use Cmd-Z (Undo) to revert the code back to the pre-altered state.  This saves some time, but you may wonder why the code is suddenly changing on it’s own … it’s not, I’m just doing cmd-z.  If you don’t see a menu selection … or a 'mouse-click' highlighted with a circle, then it’s me doing cmd-z. )

These bugs explain a LOT about what I’ve been experiencing recently, where text selection 'jumps about' and I struggle to just simply select the text I want.  I’ve even had a couple of occasions, where selecting text and hitting Delete, suddenly erases a huge chunk of un-selected text and incredibly, Cmd-Z does NOT bring it back.  Luckily, I have a safety-net of stored html, which I can return to if I have to.

I’ve played around with the BlockQuote in the Format menu … I would prefer it included in there and not have it as a button.  I don’t know how to do this properly. I don’t actually want to use Quotation (as applied in 2.6.x.x) I prefer Blockquote. NB.. 25.x.x uses Blockquote when Quotation is chosen from the Format menu!!

( ASIDE: As you may notice in the video, the Toolbar doesn’t always appear when I select text.  I use the Mac’s Shift-Arrow (left or right) to force it to appear, but this is not ideal and regularly results in my inadvertently selecting an extra paragraph, as per the video.  Is there a shortcut I can use on Mac, to make the Toolbar appear when wanted?  (This is important for inline, e.g. if I want to insert the Date via a button in the Toolbar. ))

I hope this isn't too 'over-the-top' 😬

Regards,

Grant

Attachment: GSymongrabSyncfusionFormatMenuBugsA.mp4_73f7f87e.zip

[Gokulraj Devarajan]

Hi Grant Symon,

We have validated your reported concerns, and we would like to provide some insights regarding the Blockquote behavior in the Rich Text Editor.

Blockquote Behavior(25.x.x):

In the earlier implementation (25.x.x), applying the Blockquote tag would remove the paragraph tags and apply the Blockquote tag individually to each text block.

Before applying blockquote:	After applying blockquote (old behavior):
<p>hello</p> <p>Syncfusion</p>	<blockquote>hello</blockquote> <blockquote>Syncfusion</blockquote>

However, this was not the standard behavior in the Rich Text Editor.

Updated Blockquote Behavior (26.x.x):

Now, when a Blockquote is applied, it correctly wraps around the paragraph elements instead of removing them.

Before applying blockquote:	After applying blockquote (current behavior):
<p>hello</p> <p>Syncfusion</p>	<blockquote>      <p>hello</p>     <p>Syncfusion</p> </blockquote>

Additionally, the "Clear Format" option should not revert the Blockquote because it is a block-level element. We have identified the reported issue, "BlockQuote Applied Paragraphs Convert to Single Paragraph When Using Clear Format," as a bug on our end, and it will be fixed in our upcoming patch release, which is expected to be rolled out by the end of September 2024.

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/61031/blockquote-applied-paragraphs-convert-to-single-paragraph-when-using-clear-format

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Toggle Button for Blockquote:
To make it easier to revert a Blockquote back to its applied format, we've introduced a toggle button in the toolbar (Blockquote). This button allows users to apply and remove the Blockquote, offering a smooth experience for toggling between formats.

Blockquote in the Format Dropdown:

If you want to use Blockquote in the format dropdown, you can achieve this by using the format property in the editor. The following code snippet demonstrates how to configure it:

Code Snippet:

format: {

    types: [

      { text: 'Paragraph', value: 'P' },

      { text: 'Code', value: 'Pre' },

      { text: 'Quotation', value: 'BlockQuote' },

      { text: 'Heading 1', value: 'H1' },

      { text: 'Heading 2', value: 'H2' },

      { text: 'Heading 3', value: 'H3' },

      { text: 'Heading 4', value: 'H4' },

    ]

  }

Sample: Stackblitz Sample

Release notes: Syncfusion Release Note 26.1.35 - Breaking Changes

Toolbar Shortcut on Mac:

Currently, there is no shortcut key to show the toolbar in the editor. Regarding the issue you mentioned, "the toolbar doesn’t always appear when I select text" on a Mac, we are validating this behavior and will get back to you with further details. We appreciate your patience in the meantime.

[Grant Symon]

Many thanks for the reply Gokulraj.

Regarding BlockQuote in the Format Dropdown:

There remains an issue when using BlockQuote as per your StackBlitz Sample. After BlockQuote is set via the Format Dropdown, it cannot then be changed to any other type of Format.  Selecting e.g. Paragraph, or H3, does NOT work. It can however, be reset via the BlockQuote button on the Toolbar.

Regards,

Grant

[Dhanesh Priya Sankar]

Hi Grant Symon

Query 1: behavior of BlockQuote in the Format Dropdown
Thank you for reaching out with your query regarding the behavior of BlockQuote in the Format Dropdown.

To clarify, when BlockQuote is applied via the Format Dropdown, changing it to another format (such as Paragraph or H3) requires first deselecting the BlockQuote format by clicking the BlockQuote option again. This reverts the BlockQuote format and allows you to apply a new one.

For a smoother experience, we recommend using the 'BlockQuote' button from the toolbar settings, as this provides a more intuitive way to toggle the format without confusion.

Query 2: Toolbar Shortcut on Mac

Regarding your query about the Toolbar Shortcut on Mac, there is currently no specific shortcut key to display the toolbar in the Rich Text Editor. However, if you're experiencing an issue where "the toolbar doesn’t always appear when you select text" on a Mac, we recommend a configuration adjustment.

Please confirm if the issue you're facing is that the toolbar does not open after selecting text. If so, we suggest modifying the behavior by setting the onSelection property in inlineMode to false. This will ensure that the toolbar appears immediately after selection (on mouseup), without requiring text to be selected.

Here’s a code snippet for reference:

var rteObj = new ej.richtexteditor.RichTextEditor({

  inlineMode: {

    enable: true,

    onSelection: false,

  },

  toolbarSettings: {

    items: [

      'Bold',

      'Italic',

      // Add additional toolbar items as needed

    ],

  },

});

rteObj.appendTo('#defaultRTE');

For more details, you can refer to our API documentation on Rich Text Editor Inline Mode.

If you need any further assistance, please don't hesitate to reach out. We’re here to help!

Regards,

Dhanesh Priya Sankar

[Revanth Krishnan]

Hi Grant,

We would like to confirm that in the current implementation of the Rich Text Editor, the Blockquote format can only be reverted by using the toggle button on the toolbar or by selecting the "Quotation" option from the format dropdown. It will not revert when selecting any other block format, such as Paragraph or Heading (H1, H2, H3, etc.).

 

We appreciate your understanding and patience as we continue to enhance the user experience.

Regards,

Revanth

[Grant Symon]

Thank you for the reply Revanth.

As you are currently working on fixing the problem as per the video I posted, I thought I'd post a 2nd video, as it may be useful for your debugging.

I'm now using a Date-Stamp button, that I was kindly helped with on this thread.  It works great.  However, it has a big problem, due to the <P> bug discussed here.  Basically, the Date is inserted and it then becomes impossible to remove the <time> tag from the following text either by hitting Return, to insert a <P> or using the Clear-Format button.  Completely stuck.

I hope this may be helpful.

__________________

Regarding Query 2: Toolbar Shortcut on Mac.. 

I understand that choice between onSelection true/false.  The problem is ... and this is very important ... when using inline mode and working on text in a document, it is completely unworkable, to have the Toolbar constantly floating above the text.  Why? Because it is constantly obscuring areas of text, that the user may well be trying to read.

It's just not suitable for inLine, especially when the Toolbar contains an item like the Date-Stamp, which is not applying anything to existing text and is instead, inserting text.  A workaround could be for the Toolbar to display at the top of the page, or ... to have a Shortcut-key as I previously suggested.  Currently I have to:

• Type a Space
• Select the Space
• Use the Toolbar
• Remove the Space

This is the best I have.

Attachment: GSymongrabSyncfusionFormatMenuBugsB_f8006877.zip

[Yaswin Vikhaash Rajaretenam]

Hi Grant Symon,

Query 2:  "the placement of the inline toolbar at the top"

We have thoroughly validated your query and identified a solution to the issue. By binding the beforeQuickToolbarOpen event, we ensured that the toolbar's position is aligned with the right side of the RTE component and matches its height. we have accounted for page scrolling to maintain proper placement of the toolbar.

To help you implement this, we have attached both the sample code and a link for your reference.

Code 

  beforeQuickToolbarOpen: function (args) {

    var rect = rteObj.inputElement.getBoundingClientRect();

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

    args.positionX = rect.left + scrollLeft;

    args.positionY = rect.top + scrollTop;

  },

Sample link - DateTimeStamp (forked) - StackBlitz

Regards,

Yaswin Vikhaash

[Grant Symon]

Hi Yaswin.

Thank you for this, which I find quite interesting.  Unfortunately, I've found when using it, that it becomes very difficult to edit existing text that is at the top of the RTE and of course, every single record has text at the top.  My Toolbar has 2 rows and so this means that the first 5 lines of text are hidden, as soon as I click into that area of the RTE.  So e.g., this reply to you, would be almost totally hidden.  I also find the Toolbar constantly opening/closing to be a bit distracting.  I'm guessing that adding a keyboard-shortcut for activating the Toolbar, isn't a simple thing??  Either way, it's an intriguing puzzle. 🙂

[Yaswin Vikhaash Rajaretenam]

Hi Grant Symon,

Currently, we do not have support for your requirements. Therefore, we have considered your request to “Need to implement keyboard shortcut to open inline quick toolbar” as an uncertain feature request from our end. This support will be included in one of our upcoming releases.

 

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/61612/need-to-implement-keyboard-shortcut-to-open-inline-quick-toolbar

 

Generally, we will plan the feature implementation based on the customer request count, feature rank, and wishlist plan. You can upvote the feature request feedback so that it gets support and will be ranked higher for implementation.

 

We have implemented a workaround by adjusting the toolbar height to -10, ensuring that the inline toolbar does not interfere with the first line of content when opened. You can modify the negative value based on your specific browser's height requirements. Please refer to the attached sample link below for further reference.

 

Sample link - DateTimeStamp (forked) - StackBlitz

[Grant Symon]

Thank you for the efforts Yaswin.

Regards,

Grant

[Vinothkumar Yuvaraj]

Hi Grant Symon,

You're welcome! Please feel free to get back to us if you have any further questions or concerns.