Drag & Drop into FCK Editor w/ Scriptaculous

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

Thu, 02/22/2007 - 08:25

saul11

Joined: 19/06/2006

Posts: 633

RE: Drag & Drop into FCK Editor w/ Scriptacul

The DOM object holding the content is FCKeditorAPI.GetInstance('InstanceName').EditorDocument.body so maybe $(FCKeditorAPI.GetInstance('InstanceName').EditorDocument.body) instead of an ID is working?

Please post any findings so others can read it!

Thu, 02/22/2007 - 13:29

argblat

Joined: 21/02/2007

Posts: 2

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>

Drag & Drop into FCK Editor w/ Scriptaculous

RE: Drag &amp; Drop into FCK Editor w/ Scriptacul

RE: Drag &amp; Drop into FCK Editor w/ Scriptacul

RE: Drag & Drop into FCK Editor w/ Scriptacul

RE: Drag & Drop into FCK Editor w/ Scriptacul