• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6523
  • Last Modified:

FCKeditor onsubmit

Hi,

I'm having a problem using FCKeditor in Javascript. I have a function, editSection, that creates an FCKeditor instance and through the FCKeditor_OnComplete function creates a custom save function to make a copy of what was entered into the FCKeditor instance. The problem I have though is that the custom save function is associated with the save button of the FCKeditor through this line of code - editorInstance.LinkedField.form.onsubmit = doSave; - Once this line of code has been executed I cannot submit my form in Javascript such as document.form.submit().

Here's my code in full:

function editSection(divId)
{
     // Various code before
     var fck = new FCKeditor( "myFCKeditor" );
     fck.BasePath = '/iwo/FCKeditor/';
     fck.Value = divContent.innerHTML;
     fck.ToolbarSet = 'Basic';
     alert( "Creating FCK" );
     divContent.innerHTML = fck.CreateHtml();
}

function doSave()
{
     alert( "Saving" );
     var editor = FCKeditorAPI.GetInstance( "myFCKeditor" );
     var contentDiv = document.getElementById( contentSectionInEdit );
     contentDiv.innerHTML = editor.GetHTML();

     return false;
}
   
function submitForm()
{
     alert( "Submitting" );
     // Various processing code.
     document.managePagesForm.submit();
}
   
function FCKeditor_OnComplete( editorInstance )
{
      alert("FCK instance loaded");
      editorInstance.LinkedField.form.onsubmit = doSave;
}

The editSection function is called when I click an edit button on my HTML form. As you can see it creates an FCKeditor instance and when that process is complete the FCKeditor_OnCompletefunction is invoked and the save button on the FCKeditor instance is associated with my doSave function. The doSave function is invoked successfully, gets the contents of my instance and updates my form fine. However, when I now click my "Save Changes" button in successfully calls my submitForm function but the line
document.managePagesForm.submit(); doesn't do anything. If I click the "Save Changes" button without clicking the edit button first the form is successfully submitted to PHP because the
FCKeditor_OnComplete function has not been invoked and the onsubmit event not changed. I cannot make my "Save Changes" button of type submit because I need to execute the
submitForm function before the form is sent to PHP.

Hope that is understandable.

Thanks,

Sean
0
seanjamesbarry
Asked:
seanjamesbarry
  • 3
  • 2
1 Solution
 
netsmithcentralCommented:
Change the submitForm function to reset the onsubmit handler before submitting the form.

function submitForm()
{
     alert( "Submitting" );
     // Various processing code.
     document.managePagesForm.onsubmit = function () { return true; };
     document.managePagesForm.submit();
}
0
 
rosemarybarryCommented:
Hi,

I have tried this but all I get is an error saying that FCK is not defined and referring to fckeditorcode_gecko.js. I get this in IE and Firefox. I don't know what it means. Can I set my save function onclick of save or does it have to be onsubmit. I don't understand this syntax - editorInstance.LinkedField.form.onsubmit = doSave. editorInstance is a reference to my FCK editor instance. LinkedField I have no idea what it is. Can I remove an FCK instance in the same way that I GetInstance?

Regards,

Sean
0
 
netsmithcentralCommented:
Here's a fulling working example page.  You'll notice my "submit" button is of type button so that I can change the submit event handler before attempting to submit the form.  FYI, editorInstance.LinkedField.form refers to the form that your FCKEditor is in.  In your case, thats document.managePagesForm.

<html>
<head>
<title>FCKEditor Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="/FCKEditor/fckeditor.js"></script>
<script type="text/javascript">
<!--
function FCKeditor_OnComplete( editorInstance ) {
      editorInstance.LinkedField.form.onsubmit = doSave;
}

function doSave(){
      var content = document.getElementById('content');
      content.innerHTML = FCKeditorAPI.GetInstance('test').GetHTML();
      
      return false;
}

function submitForm(){
      document.fcktestfrm.onsumbit = function () { return true };
      document.fcktestfrm.submit();
}
//-->
</script>
</head>
<body>
<form action="fcktest.html" name="fcktestfrm">
<script type="text/javascript">
<!--
var editor = new FCKeditor('test');
editor.ToolbarSet = 'Default';
editor.Height = 400;
editor.Width = 800;
editor.Value = 'Welcome to FCKEditor!';
editor.Create();
//-->
</script>
<div id="content"></div>
<input type="button" value="Submit" onclick="submitForm();">
</form>
</body>
</html>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rosemarybarryCommented:
Your test works great. The only problem that I have is that my FCKeditor instance is created when the user clicks an edit button. The edit button enables the text contained within a div to be edited. It causes my editSection function to be called.

function editSection(divId)
{
       var divIdShort = divId + "short";
       var divIdContent = divId + "content";
       shortSectionInEdit = divIdShort;
       contentSectionInEdit = divIdContent;
            
       var divContent = document.getElementById( divIdContent );
       var divShort = document.getElementById( divIdShort );
            
       var fck = new FCKeditor( "myFCKeditor" );
       fck.BasePath = '/FCKeditor/';
       fck.Value = divContent.innerHTML;
       fck.ToolbarSet = 'Basic';
       divContent.innerHTML = fck.CreateHtml();
            
       divContent.style.display = "";
       divShort.style.display = "none";
}

The rest is the same.

function doSave()
{
      var editor = FCKeditorAPI.GetInstance( "myFCKeditor" );
      var contentDiv = document.getElementById( contentSectionInEdit );
      contentDiv.innerHTML = editor.GetHTML();
      contentDiv.style.display = "none";
      var shortDiv = document.getElementById( shortSectionInEdit );
      var idxStart = contentDiv.innerHTML.indexOf( '<H' );
      var idxEnd;
            
      if( idxStart != -1 )
      {
          idxEnd = contentDiv.innerHTML.indexOf( '</H', idxStart );
          idxEnd = contentDiv.innerHTML.indexOf( '>', idxEnd );
          idxEnd++;
            
          shortDiv.innerHTML = contentDiv.innerHTML.substring( idxStart, idxEnd );
      }
     else
     {
          idxStart = contentDiv.innerHTML.indexOf( '<h' );
                  
          if( idxStart != -1 )
          {
               idxEnd = contentDiv.innerHTML.indexOf( '</h', idxStart );
               idxEnd = contentDiv.innerHTML.indexOf( '>', idxEnd );
               idxEnd++;
            
               shortDiv.innerHTML = contentDiv.innerHTML.substring( idxStart, idxEnd );
          }
          else
               shortDiv.innerHTML = contentDiv.innerHTML;
      }
            
     shortDiv.style.display = "";
     return false;
}
      
function submitForm()
{
      var divToAppendTo = document.getElementById( "divToAppendToOnSubmit" );
      var hiddenInputId = "divContents[]";
      var existingInputs = document.getElementById( hiddenInputId );
            
      if( existingInputs != null )
          divToAppendTo.innerHTML = null;
            
      var list = document.getElementById( 'sections' );
      var items = list.getElementsByTagName("li");
            
      for( var i = 0, n = items.length; i < n; i++ )
      {
             var hiddenField = document.createElement( "input" );
             hiddenField.type = "hidden";
             hiddenField.name = hiddenInputId;
             hiddenField.id = hiddenInputId;
             hiddenField.value = items[i].firstChild.nextSibling.innerHTML;
             divToAppendTo.appendChild( hiddenField );
       }
            
       document.managePagesForm.onsumbit = function () { return true };
       document.managePagesForm.submit();
}
      
So the difference is that I'm creating FCKeditor instances when an edit button is clicked and that I'm using the createHtml function/method to create the FCKeditor instance within a div. Apart from that I can't see any difference. When I try and submit the form it works fine when the edit button has not been clicked and the doSave function not executed. When I have clicked the edit button and created a FCKeditor instance I can change the div contents but when I go to submit the form it won't submit, even after changing the onsubmit handler.

Please help.

Sean
      function FCKeditor_OnComplete( editorInstance )
      {
            editorInstance.LinkedField.form.onsubmit = doSave;
      }
0
 
rosemarybarryCommented:
Hi Netsmithcentral, are you able to help me with what I last posted. I feel that I'm almost there and with your help I can get this finished. Thanks, Sean
0
 
Computer101Commented:
PAQed with points refunded (500)

Computer101
EE Admin
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now