CODEWITHSUNDEEP
c#asp.net-coreckeditor
TheMixy
TheMixy

Reputation: 1296

CKeditor 4 - Set default style for html element in ASP.NET Core

I'm using CKeditor 4 in my Asp.Net Core web app so that users can write business letters which are then exported to PDF (itextsharp).

Html control:

<div class="form-group">
    <label>Vsebina: </label>
    <textarea asp-for="Vsebina" name="Vsebina" class="form-control html-text" data-provide="markdown"></textarea>
    <span asp-validation-for="Vsebina" class="text-danger"></span>
</div>

and JS binding:

$("#Vsebina.html-text").ckeditor();

I want to add some margin to <p> elements so that line breaks are bigger by default, so I added the following to CKEditor's content.css:

p {
    margin-bottom: 30px;
}

But, this works only half-way. Because calling ckeditor() on #Vsebina textarea actually creates a new html div on the webpage with id="cke_Vsebina". Part of this new div is also an iframe element which includes all the styles defined in content.css and "raw" html entered into #Vsebina textarea. So the users see styles as defined in content.css.

On the other hand #Vsebina only holds "raw" html, no styles. And when users clicks save the latter html is bound to the Model. Hence, html that is passed to itextsharp holds no styles and resulting PDF is not designed as intented.

How can I get the html with styles into my controller action on save?

public IActionResult Save(VloziscaDetailModel model)
{
    if(ModelState.IsValid) 
    {
        //some stuff here ...

        item.Vsebina = model.Vsebina; //this html is without styles

        //some other stuff here
    }
}

//model
public class VloziscaDetailModel
{
     //bunch of other properties
     public string Vsebina { get; set; } //this one holds the html from textarea (CKeditor)
}

EDIT: I have also tried this (CKEDITOR.instances.Vsebina.getData()), but the result is the same. Styles from content.css are not included in the resulting html.

Upvotes: 1

Views: 495

Answers (1)

f1ames
f1ames

Reputation: 1734

As you already mentioned content.css is used only for editor editable area. And iframe element provides separation of styles between editor and rest of the page. You can read more about this concept in official CKEditor 4 docs here - https://ckeditor.com/docs/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles. It gives proper separation of content and styles and allows to style displayed content differently (and in multiple way on different views).

This means you need to provide styles for your frontend view (pages where CKEditor 4 content is displayed) separately. If those should be the same as in CKEditor 4 editable area it can be the same content.css file. There is no built-in way to do this, it requires custom handling in your integration.

There is also more extensive docs page about styling editor content - https://ckeditor.com/docs/ckeditor4/latest/features/styles.html.

Upvotes: 1

Related Questions