CKEditor Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

I have written a simple HTML which substitutes CKEditor for text area.  I want to be able to gather attributes about the data that is entered as it is being entered in.  For example, the text that is typed or the length of the text that is being typed.  I've created a sample in jsfiddle that works without any issues but the same script does not work in my work environment.  I'm very new to coding with jquery and so I do not even know where to begin to troubleshoot this problem.

The error I get in Crome's Jvascript console is:
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined.

Any help or suggestions would be very much appreciated.

You can get to my jsfiddle here:
https://jsfiddle.net/SueJStevens/vc44kq44/7/

I have attached the code for those who can not get to the JSFiddle:
sstevens-ckeditor-test2.html
SueJStevensAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Updated html and js https://jsfiddle.net/vc44kq44/11/ works as expected.  When it shows length, it may be more than you expect because visually you can only see the text, but in the editor if you click source you can see you are starting with, <p>Initial some editor content.</p> so that is 7 extra characters for the opening and closing p.
<p>
My Editor:<br>
<textarea name="editor1" id="editor1">&lt;p&gt;Initial some editor content.&lt;/p&gt;</textarea>

<p id="textresult">textresult</p>
<p id="fieldlength">fieldlength</p>
<p id="feedback">feedback</p>

Open in new window

and js to
//This script works until CKEditor.Replace is invoked.  
//Then I am no longer able to access the value in the CKEditor.
//so as the initial value is replaced with something new 
//the value in the paragraphs 'textresult' 'fieldlength' and 'feedback' is not accurate.

var editor = CKEDITOR.replace( 'editor1' );

// The "change" event is fired whenever a change is made in the editor.
editor.on( 'change', function( evt ) {
    // getData() returns CKEditor's HTML content.
    //textresult
    var text_value = evt.editor.getData();
    var field_length = text_value.length;
        $('#textresult').html(text_value );
    //alert(field_length);
       //$(this).after($('#textresult').html(text_value ));
        $('#fieldlength').html('length of field ='+field_length);
     
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SueJStevensAuthor Commented:
Hi.  Thank you for responding to my question.  As a newbie I'll take all the help I can get.  The problem, however, doesn't seem to have been addressed in your answer.  

When I create this code on JSFiddle (mine or yours), it functions perfectly.  No issues.  **But** when I use the exact code in my work environment it throws an error in Crome's Jvascript console:
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined.

So my question is How do I start to troubleshoot and resolve the above error?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you using the same exact code in your own server or is there other html and js?  Small errors in one place can block other js scripts from running.

The browser console should give you a small clue.  I would also use an html validator to make sure the html is valid, all tags are closed properly, you are not using duplicate id's etc. You can also use a js linter like http://www.jslint.com/ but it is not going to lint jquery code, just that the javascript part is valid.

You can post a link to your sample page for us to look at.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

SueJStevensAuthor Commented:
Scott,
Thanks so much for all your advice.   I confirmed I'm using the same exact code and in the process simplified the test for purposes here.  I'm attaching it for your reference.
test.html
0
SueJStevensAuthor Commented:
Scott,
Your original solution did correct the problem...which was that the line of code:
$(this).after($('#textresult').html(text_value ));
needed to be removed.
Your solution has it removed and I missed that.
Thanks again for helping out.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.