How to override heading styles
How can we override the output style of these headings:
And if overriding is not possible, how can we create new headings with custom styles?
Sample output:
I was able to create a new style for paragraph & character but they were not treated as a heading:
And when I try to add table of contents, it was not recognized as a heading:
Hi Deejay,
You can manually override the style by following below steps:
Click manage style options in dropdown.
Dialog will open. Select the style which you want to modify and then click Modify options.
Here, you can change the format based on your requirement and then click ok button.
Now, apply style and respective heading style will apply.
Please let us know whether this satisfied your requirement.
Regards,
Suriya M.
Our Concern:
Apologies for the confusion.
So basically we have implemented our own heading dropdown.
And the way we apply heading is using:
document.editorModule.applyStyle('Heading 1'); // If user has selected Heading 1 from the dropdown
Our problem is that, when we do this, text font style for the selected text would automatically be converted to Calibri Light regardless of the font style it has. 
We also want that when user selects Heading 1, we can apply our own custom style for heading 1
without the user going through another process of converting that heading's style to something else.
As of now, this is what we are doing:
Unfortunately, the converted text is not recognized as a heading, but just a text with a custom font styles.
After testing it again, here's my new findings:
Steps to replicate:
- Go to this demo
- Make sure to clear everything from the document
- Type something like "Hello World". Notice that the font style is Calibri by default
- Select and highlight "Hello World"
- Select Headng 1 from dropdown
- Notice that the font style is now Calibri Light
- Go to this demo
- Make sure to clear everything from the document
- Type something like "Hello World". Notice that the font style is Calibri by default
- Change Font Style to Arial
- Select and highlight "Hello World"
- Select Headng 1 from dropdown
- Notice that the font style is still Arial
Our Setup:
@syncfusion/ej2-react-documenteditor v20.1.51
Default character & paragraph format:
Hi
Suriya Murugan,
Yes I would like to modify
(Heading 1 to Heading 6). But I would l like to do it through code
Basically our company is implementing our own tool & dropdown for Heading Selection
What I need is to override the default style for Heading 1
so I need to change it through code,
So when the user selects Heading 1,
it would automatically apply the new modified heading style for good user experience
Is there a way you can share a code on how to do this? I cannot find it in your docs.
