-
Notifications
You must be signed in to change notification settings - Fork 289
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added new kb article editor-enter-new-line-gets-deleted-list-issue (#528
) * Added new kb article editor-enter-new-line-gets-deleted-list-issue * kb(editor): improve the example part * kb(editor): fix formatting --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Rumen Zhekov <rumen.jekov@gmail.com>
- Loading branch information
1 parent
9d61e95
commit 1ce5246
Showing
1 changed file
with
73 additions
and
0 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
knowledge-base/editor-enter-new-line-gets-deleted-list-issue.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
--- | ||
title: The line below is deleted when clicking enter in a list pasted from Word | ||
description: Learn how to resolve the issue where ordered and unordered lists copied from Word are not properly displayed when pasted into RadEditor for ASP.NET AJAX. | ||
type: how-to | ||
page_title: The new line gets deleted when clicking enter in a list pasted from Word | ||
slug: editor-enter-new-line-gets-deleted-list-issue | ||
tags: radeditor, asp.net ajax, paste from Word, unordered list, issue | ||
res_type: kb | ||
--- | ||
|
||
## Environment | ||
|
||
| Product | RadEditor for ASP.NET AJAX | | ||
| ------- | ------------------------- | | ||
| Version | all | | ||
|
||
## Description | ||
|
||
When pasting content from Microsoft Word into RadEditor, you may encounter an issue where lists (ol and ul) are not properly displayed. Specifically, when you click enter after pasting the list, a line is deleted. This issue occurs because the pasted content sometimes has HTML structure anomalies, particularly with the list elements. | ||
|
||
For example, if you paste content into a [standard editable div/iframe element](https://dojo.telerik.com/UlaCozIk) (like the content area of RadEditor) and inspect it, you might notice an issue where a nested `<ul>` tag is not properly enclosed within `<li>` tags. According to XHTML and HTML5 standards, a `<ul>` must be nested inside a `<li>` when it is a child of another `<ul>`. However, the pasted content does not always adhere to this requirement, which leads to the malformed structure shown below: | ||
|
||
````HTML | ||
<ul> | ||
<li>Parent List Item</li> | ||
<ul> <!-- This <ul> should be wrapped within <li> tags --> | ||
<li>Newsted List Item</li> | ||
</ul> | ||
</ul> | ||
```` | ||
|
||
This incorrect nesting can disrupt the content validation functionality of RadEditor, potentially leading to issues like the deletion of lines or improper list formatting. | ||
|
||
## Solution | ||
|
||
To resolve this issue, you can modify the OnClientPasteHtml event in the RadEditor configuration to automatically correct the structure of the pasted HTML. Follow the steps below: | ||
|
||
1. Add the following JavaScript code to your RadEditor configuration: | ||
|
||
```javascript | ||
<script> | ||
function onClientPasteHtml(sender, args) { | ||
var pastedHtml = args.get_value(); | ||
var wrapper = document.createElement('div'); | ||
wrapper.innerHTML = pastedHtml; | ||
|
||
// Query all <ul> elements | ||
var allULs = wrapper.getElementsByTagName('ul'); | ||
Array.from(allULs).forEach(function (ul) { | ||
// Check if the <ul> is a direct sibling of an <li> | ||
var previousSibling = ul.previousElementSibling; | ||
if (previousSibling && previousSibling.tagName.toLowerCase() === 'li') { | ||
// Move the <ul> to be a child of the previous <li> | ||
previousSibling.appendChild(ul); | ||
} | ||
}); | ||
|
||
// Update the HTML to be pasted | ||
args.set_value(wrapper.innerHTML); | ||
} | ||
</script> | ||
``` | ||
|
||
2. Use the `OnClientPasteHtml` event in the RadEditor control to call the `onClientPasteHtml` function: | ||
|
||
```html | ||
<telerik:RadEditor runat="server" ID="RadEditor1" Height="600px" OnClientPasteHtml="onClientPasteHtml"> | ||
</telerik:RadEditor> | ||
``` | ||
|
||
By implementing this code, the function will check for any `<ul>` elements that are direct siblings of `<li>` elements and adjust the DOM to wrap these `<ul>` elements within the preceding `<li>`. This ensures that the pasted HTML has the correct structure and resolves the issue with unordered lists pasted from Word. | ||
|
||
|