Hi , I am new with that technology. I am facing one problem when i am going to work with that editor.
What i need actually is given below:
1. Need to add a Button on Editor Header Which name should be "Insert layer"
2. When We Click this Button a fixed size Div will be added to the Editor Text Area.
3. And We should able to drag/drop the div in any where of the Text area of Editor.
Could you please give any idea and sample code or any link to do functionality as i have explained.
Thanks,
Rashim
What i need actually is given below:
1. Need to add a Button on Editor Header Which name should be "Insert layer"
2. When We Click this Button a fixed size Div will be added to the Editor Text Area.
3. And We should able to drag/drop the div in any where of the Text area of Editor.
Could you please give any idea and sample code or any link to do functionality as i have explained.
Thanks,
Rashim
5 Answers, 1 is accepted
0
Hello Rashim,
The drag and drop event in the content area is supported by IE and Firefox only and it occurs when style="position: absolute" is applied to the DIV element. For your convenience I implemented a custom toolbar button InsertDiv which inserts a draggable DIV in the content area:
You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.
Kind regards,
Rumen
the Telerik team
The drag and drop event in the content area is supported by IE and Firefox only and it occurs when style="position: absolute" is applied to the DIV element. For your convenience I implemented a custom toolbar button InsertDiv which inserts a draggable DIV in the content area:
Copy Code
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head runat="server"> <title></title> <style type="text/css"> .reTool .InsertDiv { background-image: url(http://demos.telerik.com/aspnet-classic/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif); } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="Scriptmanager1" runat="server" /> <telerik:RadEditor ID="RadEditor1" runat="server" ToolsFile="ToolsFile.xml"></telerik:RadEditor> <script type="text/javascript"> Telerik.Web.UI.Editor.CommandList["InsertDiv"] = function (commandName, editor, args) { editor.pasteHtml("<div style=\"position:absolute;width:150px;height:150px;border: 1px solid red;\">sample content</div>"); }; </script> </form></body></html>You can see the following video for more information: http://screencast.com/t/WvoKCP2MtE.
Kind regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Rashim
Top achievements
Rank 1
Rank 1
answered on 22 Sep 2011, 03:17 PM
Yeah by using telerik API the drag and drop is working only for IE and Chrome. But one thing i could not resolve yet that is, when i select any DIV to move or re-size i could do but after that if i click any where of the editor the DIV still be selected and i could do anything on the rest of space of the content area. So how should I clear the selection?
Thanks,
Rashim
Thanks,
Rashim
0
Accepted
Hello Rashim,
I believe that you experience this issue in Firefox. Am I correct?
I found that this is a browser behavior and to enable the typing in the content area you should double click over the div's crossed arrows move handler as shown in the following video:
http://screencast.com/t/6FmHaid6
Kind regards,
Rumen
the Telerik team
I believe that you experience this issue in Firefox. Am I correct?
I found that this is a browser behavior and to enable the typing in the content area you should double click over the div's crossed arrows move handler as shown in the following video:
http://screencast.com/t/6FmHaid6
Kind regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Rashim
Top achievements
Rank 1
Rank 1
answered on 25 Sep 2011, 03:17 PM
Yeah it is true and got the answer now.Thanks a lot. I have seen that it is not possible to drag and drop a div inside the Rededitor container that is compatible for all browser. But i could be able to drag and drop by using javascript. So could you please suggest me how i could disabled the existing drag drop facilities of telerik reditor and insert my javascript in this control.
Thanks,
Rashim
Thanks,
Rashim
0
Hi Rashim,
The drag&drop functionality inside the RadEditor's content area is not an implementation of Telerik but is a feature of the browser's default RichTextEditing. In order to intercept the drag&drop with JavaScript you will need to handle mouseup and mousemove events. In the following help article you can find an example how to assign external handlers to the RadEditor's content area:
attachEventHandler
All the best,
Dobromir
the Telerik team
The drag&drop functionality inside the RadEditor's content area is not an implementation of Telerik but is a feature of the browser's default RichTextEditing. In order to intercept the drag&drop with JavaScript you will need to handle mouseup and mousemove events. In the following help article you can find an example how to assign external handlers to the RadEditor's content area:
attachEventHandler
All the best,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now