[Solved] New paragraph functionality

[Orest]

I basically have 2 questions,

1. When I add new paragraph from the toolbar paragraph is  getting created but my cursor is outside(right after) newly created paragraph.  At that point its almost impossible to click inside of that paragraph and start typing. What do I need to do to place my cursor inside of the P tags?

2. When new paragraph is created I get <p>&nbsp;</p> in HTML markup if I switch it to HTML view and back to design it switches it to <p> </p>. What do I need to do so it does <p> </p> on the first place 


 

[Rumen]

Hello Orest,

RadEditor uses the InsertParagraph execCommand implementation of the browser to insert a new paragraph. You can customize this tool by overriding the browser command and make it work as per your requirements. You can use the following code as a base for your implementation:

<script type="text/javascript">
function OnClientCommandExecuting(editor, args)
{
   //The command name
   var commandName = args.get_commandName();
   if ("InsertParagraph" == commandName)
   {
       if ($telerik.isIE)
       {
           var range = editor.get_document().selection.createRange();
           if (range.pasteHTML)
           {
                range.pasteHTML("<p>");
                range.select();
                range.moveEnd("character", 1);
                range.moveStart("character", 1);
                range.collapse(false);
           }
           args.set_cancel(true);
       }
   }
}
</script>
<telerik:radeditor runat="server" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1"> </telerik:radeditor>

The code for overriding the InsertParagraph command is just a basic example and we do not support it. If you cannot modify it to fully achieve your scenario then you can hide this tool and set the RadEditor's NewLineBr property to "false", e.g.

<telerik:radeditor runat="server" NewLineBr="false" ID="RadEditor1"></telerik:radeditor> 

Therefore the editor will wrap the content in P tags when the Enter key is pressed.

Sincerely yours,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Orest]

Why then after i switch from  
Design to HTML To Back Design
<p>&nbsp;</p>
switches it to
<p> </p>
Basically I need the same thing to happen. Does this has anything to do with Content Filters? 

Also is there a way for me place cursor inside newly created paragraph?

Thanks!

[Rumen]

Hi Orest,

Yes, the conversion of <p>&nbsp;</p> to <p> </p> is made by the editor's ConvertToXhtml content filter. The empty space is replaced with &nbsp;

We are currently working on a solution that will help you to place cursor inside newly created paragraph. I will write back tomorrow with more information.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rumen]

Hi Orest,

Here is the promised solution:

<script type="text/javascript">

function OnClientCommandExecuting(editor, args)
{
   //The command name
   var commandName = args.get_commandName();
   if ("InsertParagraph" == commandName && $telerik.isIE) {
       var range = editor.get_document().selection.createRange();

       var id = (new Date() - 100);

       if (range.pasteHTML) {
           range.pasteHTML("<p id='" + id + "' ></p>");
           range.select();
           range.moveEnd("character", 1);
           range.moveStart("character", 1);
           range.collapse(false);
       }
       args.set_cancel(true);

       var p = editor.get_document().getElementById(id);
       p.removeAttribute("id");
       if (!p.innerHTML) p.innerHTML = " ";
       range.moveToElementText(p);
       range.select();
   }
}
</script>

<telerik:radeditor runat="server" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1"> </telerik:radeditor>

For your convenience I have attached a video demonstrating how the solution works.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Orest]

Thank you very much, very nice solutions.
Can you please tell me why do you check fortelerik.isIE is this supposed to work only on IE?

[Rumen]

Hi Orest,

Yes, the provided solution is intended to work in Internet Explorer only. The InsertParagraph command of Firefox works in different way - Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.).

In addition the Firefox API for creating text ranges is different and it will be much difficult to produce the same result in this browser. If you would like you can do this yourself using the information in this article: https://developer.mozilla.org/en/DOM/document.createRange

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.