This is a migrated thread and some comments may be shown as answers.

Remove outer p tag from editor

11 Answers 273 Views
Editor
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 27 Aug 2019, 03:49 PM
Is there a way to get the editor to not place a wrapper <p> tag when it edits.

11 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 29 Aug 2019, 08:41 AM
Hi John,

There should always be an element holding the value for the Editor. Thus, there is no option to remove the wrapping <p> tag.

If you could provide some more details about the use case scenario, we can try to suggest another approach of achieving it. 

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bob
Top achievements
Rank 2
Veteran
Iron
answered on 11 Sep 2020, 05:32 PM

The <p> tag is always applied to text regardless of whether it wrapped in another tag.

    <li>Have topical MARs been completed if applicable?</li>

becomes

<li><p>Have topical MARs been completed if applicable?</p></li>

This wouldn't be so bad if we could format the <li><p> style but I can see no way of editing styles.

0
Svet
Telerik team
answered on 15 Sep 2020, 08:14 AM

Hi,

I will try to explain why the Editor behaves like that and then I will offer a workaround for the issue.

By design the EditorComponent is a What-You-See-Is-What-You-Get (WYSIWYG) editor - its content is visually consistent. To achieve this consistency some rules have to be applied and the underlying HTML may be modified. One of these rules is to wrap each text block inside a <p> tag - thus the rendered HTML content is different from the one initially provided.

Having said that, the rendered content can  be styled by injecting custom CSS using native DOM APIs:

- For iframe mode, a reference to the underlying <iframe> should be obtained and the needed custom styles should be injected as this StackBlitz demonstrates: https://stackblitz.com/edit/angular-5vhepp-ss1ndv?file=app/app.component.ts

- For non-iframe mode, the needed elements should be targeted using custom CSS rules. Here is a sample StackBlitz:

https://stackblitz.com/edit/angular-5vhepp-pn2wgl?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Bob
Top achievements
Rank 2
Veteran
Iron
answered on 27 Oct 2020, 04:40 PM

I have used the [iframe]=false option.
Your solution works when displaying the html in the editor.  However, once outside the editor we have the same problem:

<li>Where did it happen?</li> becomes <li><p>Where did it happen?</p></li> and throws out formatting by adding extra spaces between the list items.

The text in <li>Where did it happen?</li> is already wrapped in html tags, I can see no reason why you should add an extra <p> tag.

0
Svet
Telerik team
answered on 29 Oct 2020, 09:38 AM

Hi Bob,

Generally, the wrapping <p> tags come from the underlying ProseMirror behavior that the Kendo UI for Angular Editor is built on. This is why, we don't have control over this behavior. I will further consult the required functionality with our Editor developer and will provide some further feedback whether it will be possible to be provided by us. However, I will be able to reply next week.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Svet
Telerik team
answered on 02 Nov 2020, 03:31 PM

Hi Bob,

I have consulted this case with the dedicated Editor developer. Indeed, currently there isn't an option that allows to strip the <p> wrapping tags of li elements due to the built - in behavior that comes from prosemirror. However, in the future we plan to provide a configurable option that allows to specify how to render each element type. Indeed, this feature would leave the control in the hands of the developer to determine the desired rendering of each element within the Editor. However it would requires some more effort and understanding of the underlying prosemirror concepts:

https://prosemirror.net/docs/guide/

I hope the provided information helps. Please let me know in case any further information is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Biju
Top achievements
Rank 1
answered on 15 Feb 2021, 08:40 AM

Hi Svetlin

I am also facing annoying behaviour. Do you have any fix for the issue?

The version that I am currently using "@progress/kendo-angular-editor": "^2.0.1",

Regards

Biju

0
Svet
Telerik team
answered on 17 Feb 2021, 07:58 AM

Hi Biju,

Thank you for the provided details.

In general the Kendo UI for Angular Editor relies on ProseMirror. ProseMirror relies on a custom schema which renders specific html for the used tags. Since version 2.0.0 of the Editor:

https://www.telerik.com/kendo-angular-ui/components/editor/changelog/#ecddc2ac-0491-5cb3-b452-6819ebf48105

the default schema can be customized as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/editor/schema/#toc-modifying-the-default-schema

in order to achieve any rendering for the specifically used tags in the Editor. 

To sum up, modifying the default ProseMirror schema should be done as per the requirements of the use - case scenario. We don't recommend a specific implementation as that is a feature provided by ProseMirror which can be further configured as required. I hope the provided information helps. Please let me know in case any further information or assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Biju
Top achievements
Rank 1
answered on 17 Feb 2021, 08:37 AM

Thank you Svetlin for your quick replay

It really helps

0
Neil
Top achievements
Rank 1
answered on 18 Feb 2021, 04:53 PM

I also have this issue where I do not want a <p> tag surrounding the text in my <li> tags. I have already made some modifications to the default ProseMirror schema so have some knowledge and understanding of ti but I can't figure out what I need to do to be able to simply allow <li>My list item text here</li>. Can a Kendo Dev please provide an example of the modifications needed to the default schema to allow this please?

I have tried the following to no avail, the list item button stops working with this modification:

const listItem = { ...(schema.spec.nodes as any).get('list_item') };
listItem.content = 'inline+';
const nodes = (schema.spec.nodes as any).update('list_item', listItem);

0
Martin
Telerik team
answered on 23 Feb 2021, 04:30 PM

Hi Neil,

Indeed there is no straight forward approach to remove the <p> tag wrappers:

https://discuss.prosemirror.net/t/removing-the-default-paragraph-p-inside-a-list-item-li/2745

The provided code snippet is correct, but the content of the li tag needs to be set to inline*:

const li = { ...schema.spec.nodes.get('list_item') };
li.content = 'inline*'

let nodes = schema.spec.nodes.update('list_item', li);

nodes = nodes.addToEnd('iframe', iframe);

Unfortunately, with this customization of the built-in schema, the list features of the Editor (Insert ordered andInsert unordered list) will be broken:

https://screenrec.com/share/wqxFJUuHte

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
n/a
Top achievements
Rank 1
Answers by
Svet
Telerik team
Bob
Top achievements
Rank 2
Veteran
Iron
Biju
Top achievements
Rank 1
Neil
Top achievements
Rank 1
Martin
Telerik team
Share this question
or