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

new line inserts additional html

1 Answer 66 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
CRAIG
Top achievements
Rank 1
CRAIG asked on 25 Jan 2017, 04:33 PM

Hello,

When I have the Telerik Rad Editor set to insert Paragraph tags for new lines, they also tend to insert additional information from the current line. This happens when the user hits Enter or when they click the New Paragraph tool bar item.

For example, I have added some custom buttons that insert placeholders into the code that I will then parse out with actual values as necessary. I am inserting HTML like this: <span title="Speakers">{{Speakers}}</span>

I like putting it in a span with a title so when they hover their mouse over it they see some additional information. 

But if this is on one line, surrounded by it's own paragraph tag, when I go to add another paragraph after it (to add additional text or placeholders or anything) user either the keyboard or toolbar item, the new paragraph will be:

<p><span title="Speakers">&nbsp;</span></p>

Instead of just:  <p>&nbsp;</p>

What can I do to insert JUST an empty paragraph? Why is it pulling my span tag in, too?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 30 Jan 2017, 11:59 AM

Hello Craig,

When the cursor is in the span, the editor will clone the styles and formatting, this is expected and usually required. The reason is that the enter key must create a block element, which is not allowed inline. You can see the same behavior in MS Word—turn on the Bold formatting on a brand new document, press enter and you will see the new paragraph already has the Bold button active.

If you add another &nbsp; in your template to let the user put the cursor there, they will not get the cloned styles (assuming the cursor is on the second &nbsp entity when Enter is pressed, of course) - as shown in the attached video

<p><span title="Speakers">&nbsp;</span>&nbsp;</p>


Regards,

Marin Bratanov
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.
Tags
General Discussions
Asked by
CRAIG
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or