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

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

<!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>