Hi all,
I would like to be able to drag text into the FCK Editor, once dropped the value of the text will be added to the Editor Source.
I am able to accomplish this with a standard text box, but I am unable to accomplish it with FCK Editor because in order to create a droppable text box area you must know the ID and set it with a simple javascript
Is it possible to obtain the ID of the text area created by the FCK Editor for inputting text? If so, how does one go about getting it?
If I'm not being clear enough please let me know and I will gladly elaborate
THANK YOU!
-Mike
I would like to be able to drag text into the FCK Editor, once dropped the value of the text will be added to the Editor Source.
I am able to accomplish this with a standard text box, but I am unable to accomplish it with FCK Editor because in order to create a droppable text box area you must know the ID and set it with a simple javascript
Is it possible to obtain the ID of the text area created by the FCK Editor for inputting text? If so, how does one go about getting it?
If I'm not being clear enough please let me know and I will gladly elaborate
THANK YOU!
-Mike
RE: Drag & Drop into FCK Editor w/ Scriptacul
Please post any findings so others can read it!
RE: Drag & Drop into FCK Editor w/ Scriptacul
Success!
With a little bit of tom-foolery I have successfully set up a working proof of concept. Instead of dropping into the FCK Editor itself, I just lay the editor on top of a div tag, and tell scriptaculous to drop on that div ... because of the inheritance it works.
I'm posting this code in the hopes that someone will be intrigued and help me perfect it...
Let me know what you think!
PS - Your going to need to download the scriptaculous files (http://script.aculo.us/downloads) and set up the pointers correctly ... I trust no one will have a problem with that
------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML> <HEAD> <title>FckDragDrop</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="<a href="http://schemas.microsoft.com/intellisense/ie5" target="_blank">http://schemas.microsoft.com/intellisense/ie5</a>"> <script src="scripts/scriptalicious/prototype.js" type="text/javascript"></script> <script src="scripts/scriptalicious/scriptaculous.js" type="text/javascript"></script> <script src="scripts/scriptalicious/unittest.js" type="text/javascript"></script> <style> .draggable { CURSOR: move } </style> <script type="text/javascript"> function drop(element, dropon) { AddToTextBox(dropon.id, document.getElementById(encodeURIComponent(element.id)).firstChild.nodeValue); } function AddToTextBox(id, value) { document.getElementById(id).value += value; } </script> <script type="text/javascript"> function test() { FCKeditorAPI.GetInstance('FCKeditor1').InsertHtml('Don\' Panic!'); } </script> </HEAD> <body> <form id="Form1" method="post" runat="server"> <div id="WysiwygDrop" style="background-color: red; padding: 5px; width: 510px; min-height: 300px;"> <FCKeditorV2:FCKeditor id="FCKeditor1" BasePath="~/FCKeditor/" ToolbarSet="MyToolbar" Width="510px" Height="300px" runat="server"></FCKeditorV2:FCKeditor> </div> <script type="text/javascript">Droppables.add('WysiwygDrop', {onDrop:function(element, dropon){ FCKeditorAPI.GetInstance('FCKeditor1').InsertHtml(document.getElementById(encodeURIComponent(element.id)).firstChild.nodeValue) }})</script> <br> <a href="javascript: void(0)" onclick="test()">Click Me</a> <span id="item1" style="CURSOR: move">«TestTag1»</span> <script type="text/javascript">new Draggable('item1', {ghosting:true, revert:true})</script> <br><br> <asp:TextBox id="tbResults" runat="server"></asp:TextBox> </form> </body> </HTML>