Guidelines for DOM manipulation

Hey all,

Are there any guidelines or recommendations for manipulating the editable() part of the CKEditor DOM? I'm using editor.on('change', blah) to determine when content changes, then performing my DOM manipulation (specifically wrapping certain text element words in span tags) and this is working okay. Every now and again however, I press a key and get a change event triggered but the DOM (and getData() result) contains the content *before* the keypress (and subsequently my editor behaves as if I didn't hit a key).

I'm assuming at this point that I'm doing something dumb, but I can't for the life of me figure out what. The spell checker plugin is presumably doing something similar to what I'm attempting, but I was hoping for a more trivial example of DOM manipulation that works, or perhaps some "don't do this or that" style guidelines.

Can anyone point me in the right direction?

Wed, 06/11/2014 - 17:28

sebstefanov

Joined: 03/02/2012

Posts: 1329

Can you give us some sample

Can you give us some sample code and more details? It might related to something the team is working on but some code will help determine that. Thx.

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn

If you think you found a bug in CKEditor, read this!

Wed, 06/11/2014 - 22:30

(Reply to #2) #3

KarlWaugh

Joined: 11/06/2014

Posts: 3

Sample Code for Problem

I broke what I'm trying to do down to the minimal code shown below. At the very least this allowed me to isolate this to an Internet Explorer problem because the page works fine in Chrome (In my full example I'm running CKEditor in a hosted IE browser control in a C# application).

If you run the page below in Internet Explorer (with the debug console open), when you type the text 'The<space>dog' the word 'dog' is wrapped in a span tag as you would expect, but when you press another key ('g' for instance), the getData() method indicates the key never made it into the HTML.

You can see the 'g' briefly appear in CKEditor before being removed and the changed event firing.

If I had to guess, I'd say it's selection related because if I move the caret around the editor and back to the end of the word 'dog', I can add the 'g' without problem (I had based the selection tomfoolery on the StackOverflow answer here).

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta charset="utf-8" />
      <!-- http://code.jquery.com/jquery-1.11.1.js -->
      <script type="text/javascript" src="jquery-1.11.1.js"></script>
      <!-- http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html -->
      <script type="text/javascript" src="jquery.highlight-4.js"></script>
    </head>
    <script type="text/javascript" src="CKEditor/ckeditor.js"></script>
    <body style="overflow: hidden">
        <div id="editorHost"></div>
        <script type="text/javascript">
         function changeDom(editor) {
            var document = editor.editable().$;
            $(document).removeHighlight();
            
            $(document).highlight('cat');
            $(document).highlight('dog');
            $(document).highlight('elephant');
            $(document).highlight('monkey');
            $(document).highlight('zebra');
         }

         function onEditorContentChanged(evt) {
            var editor = evt.editor;
            
            if (editor.checkDirty()) {
               var html = editor.getData().trim();
               console.log('Editor content changed: ' + html);
               
               var bookmarks = editor.getSelection().createBookmarks();					
               changeDom(editor);
               editor.getSelection().selectBookmarks(bookmarks);
               
               html = editor.getData().trim();
               console.log('DOM changed: ' + html);
            }
         }

         CKEDITOR.on('instanceReady',
                function (evt) {
                    var editor = evt.editor;
                    editor.on('change', onEditorContentChanged);
                });		
            
            CKEDITOR.on('instanceCreated', function (e) {
                CKEDITOR.addCss('.highlight { background-color: yellow }');
            });

            CKEDITOR.appendTo('editorHost');
        </script>
    </body>
</html>

Thu, 06/12/2014 - 02:15

(Reply to #3) #4

KarlWaugh

Joined: 11/06/2014

Posts: 3

Workaround Found

I managed to fix my problem by triggering my DOM manipulation on key events rather than change events, and removed a call to node.normalize() in the 'jquery.highlight-4.js' I was using to do the actual DOM manipulation. This works fine for the problem I was trying to solve and, as I suspected, doesn't appear to be related to anything in CKEditor itself.