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

Editor - Styles - Apply styles to elment instead of span

5 Answers 110 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 20 Mar 2017, 08:31 PM

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")
                               )
                           )

 

 

5 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 22 Mar 2017, 09:48 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tim
Top achievements
Rank 1
answered on 23 Mar 2017, 04:10 PM

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.

 

 

 

 

0
Magdalena
Telerik team
answered on 24 Mar 2017, 11:25 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex
Top achievements
Rank 1
answered on 09 Apr 2021, 06:05 AM

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" }
                ]
}
0
Alex
Top achievements
Rank 1
answered on 09 Apr 2021, 06:08 AM
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.
Tags
Editor
Asked by
Tim
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Tim
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Share this question
or