Set margin on new paragraph?

[Bob]

Is it possible to set a margin-top:0px (or any other margin style) every time a new paragraph is inserted in the editor?

Thanks, Bob

[Misho]

Hi Bob,

By default Kendo editor inserts new paragraph on pressing Enter in the content. The way it is displayed in the content area of Kendo editor doesn't differ from a simple editable div, e.g.  https://dojo.telerik.com/upeyedIP/3 

However if you would like to reduce the space between the rows, you could consider to change the behavior to inserting <br> tag instead.

The following example demonstrates how to change the default new-line behavior from inserting <p> tag to <br> tag:

https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/customize/change-p-to-br-tag

Here is a runnable sample for your reference: https://dojo.telerik.com/ExOGoguY 

I hope this helps.

Best Regards,
Misho
Progress Telerik

[Bob]

Hello Misho,

The reason this issue came up is that when the HTML created in the Kendo editor is used in a full HTML page, the margins for <p> tags default to the browser's agent, which is typically 1em, unless they are overridden by some other CSS.  Unlike the WPF editor, the author has no way to set their desired margins unless they edit the HTML directly which we don't want to allow (we use HTML edited in both environments WPF and Kendo and it transfers back and forth).  Our product has a feature where the Kendo editor text is placed in a full page that can be immediately previewed, and the default browser margins are undesirable.  I was hoping there might be some way to intercept/extend the ParagraphCommand and inject margins at that point.

I think we have two solutions:  1 - create custom paragraph settings like you have in your WPF editor so that authors can control the paragraph settings, or 2 - inject the margins when the full document is previewed.  I am opting for solution 2 right now and injecting the margins:

public static string AddDefaultMarginsToParagraphs(string html)
{
    return html.Replace("<p>", "<p style='margin-top:0px;margin-bottom:0px;'>");
}

 

Thank you for your suggestion on the <br> replacement.  That also might be an alternative for specific situations where text must be kept together.

 

-- Bob

 

 

[Misho]

Hello,

When using textarea for initializing the Editor component its content reside inside an iframe.

You could apply custom styles such as modifying margin to Kendo editor content inside the iframe by using the Stylesheets configuration:

https://docs.telerik.com/kendo-ui/api/javascript/ui/editor/configuration/stylesheets 

You need to create a css file with margin equals to 0 for the paragraphs:

 

 p {
    margin: 0px;
}

You could also consider post-process Editor content right before the <form> is posted to the server:

https://docs.telerik.com/kendo-ui/controls/editors/editor/post-process 

I hope you will find this information useful.

Regards,
Misho
Progress Telerik