IE - Unable to get value of the property.. on submit

I have the following code snippet running in a function that is called from a form's onsubmit event:

CKEDITOR.instances.content.setData(getContent());

The getContent() function just returns text that should replace the current content of the CKEditor instance on that page. I've tested this in Chrome and Firefox and it works as expected, but in IE I get the following error:

SCRIPT5007: Unable to get value of the property 'innerHTML': object is null or undefined
ckeditor.js, line 17 character 45

Are there any workaround for this issue?

Wed, 09/05/2012 - 09:58

reinmar

Joined: 24/08/2012

Posts: 631

Re: IE - Unable to get value of the property.. on submit

On which version of CKEditor are you testing this? And can you provide a simple test page on which I will be able to see the error?

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Wed, 09/05/2012 - 11:18

tims

Joined: 04/09/2012

Posts: 3

Re: IE - Unable to get value of the property.. on submit

Hi Renmar, I'm using version 3.6.4. Below is an example page on which the problem occurs:

<html>
<head>
   <script src="PATH_TO_JS/ckeditor.js" ></script>
   <script>
      function copyContent(){
         CKEDITOR.instances.content.setData("Hello World!");
         return false;
      }
   </script>

</head>
<body>

   <form name="test" id="test" onsubmit="return copyContent()">
      <textarea name="content" id="content"></textarea>
      <input type="submit" />
   </form>

   <script>
      CKEDITOR.replace( 'content', {
          skin : 'kama',
            toolbar: [
             {name: 'basicstyles', items : [ 'Bold','Italic','Strike','Subscript','Superscript','-','RemoveFormat'] },
            {name: 'document',    items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
             {name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','-','ShowBlocks','BidiLtr','BidiRtl' ] },
                '/',
                {name: 'styles',      items : [ 'Styles','Format' ] },
              {name: 'color',       items : ['TextColor', 'BGColor']},
                {name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
                {name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','SpecialChar'] }
             ],
         resize_enabled: false,
         height: '300px',
          toolbarCanCollapse: false,
          uiColor: '#eeeeee'
      });
   </script>
</body>
</html>

Wed, 09/05/2012 - 14:48

reinmar

Joined: 24/08/2012

Posts: 631

Re: IE - Unable to get value of the property.. on submit

It looks like there's a some kind of race condition. CKEditor is listening for submit too and data can't be set (or something else done - dunno) twice in a short time. What you need is disabling autoUpdateElement.

This works for me:

<!DOCTYPE html>
<html>
   <head>
      <script src="ckeditor3-dev/trunk-v3/ckeditor_source.js"></script>
      <!--script src="ckeditor-dev/ckeditor.js"></script-->
      <script>
         function copyContent( data ) {
            CKEDITOR.instances.content.setData( data );
            return false;
         }
      </script>
   </head>
   <body>
      <form name="test" id="test" onsubmit="return copyContent('boom!')">
         <textarea name="content" id="content">sss</textarea>
         <a href="#" onclick="return copyContent('tadam!')">click</a>
         <input type="submit" value="click &amp; bang!">
      </form>

      <script>
         CKEDITOR.replace( 'content', { autoUpdateElement: false } );
      </script>
   </body>
</html>

PS. Similar issue doesn't occur on CKEditor 4 beta even with autoUpEl == true.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

Thu, 09/06/2012 - 10:56

tims

Joined: 04/09/2012

Posts: 3

Re: IE - Unable to get value of the property.. on submit

Thanks for the fix - that works for the simple example I posted. However, in our application we have the CKEditor surrounded in tabs that are created by a Javascript framework called ExtJS. The submission works as usual when the tab containing the editor is active. When the other tab (which uses a source editor called CodeMirror, which I have left out of the example below) is active, I get the same error on form submission. This error appears to arise from the point that I try to get content from CKEditor and update the underlying textarea manually:

document.getElementById("content").value = CKEDITOR.instances.content.getData();

Below is a full example page that contains two tabs which should illustrate the problem. It works in all browsers except IE. CKEditor 4 beta works as expected, so we'll be happy to upgrade to that as soon as it is released, but I was wondering if there was an interim fix available?

<!doctype html>
<html>
<head>

   <style type="text/css" media="all">
      .CodeMirror{width:100% !important;border:1px inset;overflow-x: scroll;}
      .CodeMirror-scroll{height:150px !important;}
      #contentCodeMirrorDiv .CodeMirror-scroll{height:420px !important;}
   </style>

   <style type="text/css" media="all">
      @import "http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css";
   </style>
   <script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
   <script src="PATH_TO_CKEDITOR/ckeditor.js" ></script>
   <script>
      function copyContent(){
         if(contentTabs.getActiveTab().getId() == "source"){
            CKEDITOR.instances.content.setData(document.getElementById("contentCodeMirror"));
         }
         document.getElementById("content").value = CKEDITOR.instances.content.getData();
         return true;
      }

      Ext.onReady(function(){

         CKEDITOR.replace( 'content', {
                skin : 'kama',
                  toolbar: [
                   {name: 'basicstyles', items : [ 'Bold','Italic','Strike','Subscript','Superscript','-','RemoveFormat'] },
                  {name: 'document',    items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
                   {name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','-','ShowBlocks','BidiLtr','BidiRtl' ] },
                      '/',
                      {name: 'styles',      items : [ 'Styles','Format' ] },
                    {name: 'color',       items : ['TextColor', 'BGColor']},
                      {name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
                      {name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','SpecialChar'] }
                   ],
               resize_enabled: false,
               height: '300px',
                toolbarCanCollapse: false,
                uiColor: '#eeeeee',
                autoUpdateElement: false
         });

         contentTabs = Ext.createWidget('tabpanel', {
              renderTo: 'tabs',
              autoWidth: true,
              activeTab: 0,
              border: 1,
              frameHeader: false,
              defaults :{
                  bodyPadding: 0,
                  height: 420,
                  border: 0
              },
              items: [{
                 id: 'wysiwyg',
                  contentEl:'contentEditor',
                  title: 'Basic',
                  listeners: {
                     activate: function(tab){
                        CKEDITOR.instances.content.setData(document.getElementById("contentCodeMirror").value);
                  }
               }
              },{
                  id: 'source',
                 contentEl:'contentCodeMirrorDiv',
                 title: 'Source HTML',
                 listeners: {
                     activate: function(tab){
                      document.getElementById("contentCodeMirror").value = CKEDITOR.instances.content.getData();
                  }
               }
              }]
          });
      });
   </script>

</head>
<body>

   <form name="test" id="test" onsubmit="return copyContent()">
         <div id="tabs">
            <div id="contentEditor" class="x-hide-display">
               <textarea name="content" id="content"></textarea>
            </div>
            <div id="contentCodeMirrorDiv" class="x-hide-display">
               <textarea name="contentCodeMirror" id="contentCodeMirror"></textarea>
            </div>
         </div>
         <input type="submit" />
   </form>
<body>
</html>