Editor - Styles - Apply styles to elment instead of span

[Tim]

I've got a Kendo editor with custom CSS styles that I'm importing via a custom style sheet. Is there a way to apply the classes to the p element instead of wrapping the text with a span element. I'm trying to control how the user formats the text to just the classes in my style sheet.

Thanks.

@(Html.Kendo().EditorFor(model => model.HtmlContent)
                               .HtmlAttributes(new { style = "width: 85%;height:600px;" })
                               .Encode(false)
                               .Tools(tools => tools
                                   .Clear()
                                   .Bold().Italic().Underline().Strikethrough()
                                   .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                                   .InsertUnorderedList().InsertOrderedList()
                                   .Outdent().Indent()
                                   .CreateLink().Unlink()
                                   .InsertImage()
                                   .InsertFile()
                                   //.SubScript()
                                   //.SuperScript()
                                   .TableEditing()
                                   .ViewHtml()
                                   .CleanFormatting()
                                   //.FontName()
                                   //.FontSize()
                                   //.FontColor().BackColor()
                                   .Formatting(formatting => formatting
                                     .Add("Intro Paragraph", ".doc-intro-paragraph")
                                     .Add("FAQ Question", ".doc-question")
                                     .Add("FAQ Answer", ".doc-answer")
                                     .Add("Section Title", ".doc-section-title")
                                 )
                               )
                               .PasteCleanup(p => p
                                   .All(false)
                                   .Css(true)
                                   .KeepNewLines(false)
                                   .MsAllFormatting(true)
                                   .MsConvertLists(true)
                                   .MsTags(true)
                                   .None(false)
                                   .Span(true)
                               )
                               .StyleSheets(css => css.Add(Url.Content("~/Content/TextEditor.css")))

                               .ImageBrowser(imageBrowser => imageBrowser
                               .Image("~/Content/Images/{0}")
                               .Read("Read", "ImageBrowser")
                               .Create("Create", "ImageBrowser")
                               .Destroy("Destroy", "ImageBrowser")
                               .Upload("Upload", "ImageBrowser")
                               .Thumbnail("Thumbnail", "ImageBrowser")
                               )

                               .FileBrowser(fileBrowser => fileBrowser
                               .File("~/Content/Documents/{0}")
                               .Read("Read", "FileBrowser")
                               .Create("Create", "FileBrowser")
                               .Destroy("Destroy", "FileBrowser")
                               .Upload("Upload", "FileBrowser")
                               )
                           )

 

 

[Magdalena]

Hi Tim,

We have run the code that you provided in a sample project, but we are not sure that we have understood you in the right way. Could you please explain in more detail what are your requirements? There is no inbuilt paragraph element in Kendo Editor. Looking forward to your reply.

Regards,
Magdalena
Telerik by Progress

[Tim]

Thanks for your reply. Below is an example of what's happening.

I start with a paragraph like this:

<p>Paragraph Text</p>

I want to apply the class .doc-section-title  from the Format dropdown to the paragraph by either highlighting all the text or placing my cursor in the paragraph.

What I want is:

<p class="doc-section-title">Paragraph Text</p>

What I get is:

<p><span class="doc-section-title">Paragraph</span> Text</p> - placing cursor at the beginning of the paragraph

or

<p><span class="doc-section-title">Paragraph Text</span></p> if I highlight all of the text. 

 

Thanks for your help.

 

 

 

 

[Magdalena]

Hi Tim,

Thank you for the clarification. We are afraid that this is not supported functionality. If you would like to customize text inside those spans, you can use the following:
HTML:

<p class="doc-section-title">Paragraph Text</p>

CSS:

.doc-section-title > span {
    /* your CSS */
}

Hoping this solution will meet your expectations.


Regards,
Magdalena
Telerik by Progress

[Alex]

This post is really outdated however, I stumbled upon it as I had the very same issue. In fact the solution is quite simple but I didn't find any documentation yet. In order to attach the class directly to the paragraph tag using the formatting tools instead of creating the <span> elements you can use:

{
       name: "formatting",
       items: [
                       { text:"Latin", value:"p.my_class_name" }
                ]
}

[Alex]

Sorry, my description might be misleading - using the formatting tools with just a class name as value, the editor inserts a span element with that class. To avoid this additional span element and attach the class directly to the paragraph tag, define the items as shown above.