按Tab键选择tinymce中某个元素的文本

Question

我如何实现以下目标？

  

[1st image] On Initiate：高亮标题

     

[第二张图片]按Tab键：突出显示说明

     

[第3张图片]按Tab键：突出显示内容

     

再次按Tab键返回以突出显示标题并继续

下面是tinymce内容：

    <hr>
    <div id='title'>
        TITLE
    </div>
    <hr>
    <div id='description'>
        DESCRIPTION
    </div>
    <hr>
    <div id='content'>
        CONTENT
    </div>

下面是我选择文本的当前功能。

    // the problem is that it doesn't select the text but put the carret in the first part of the text
    // looks like this (|*carret) --> |TITLE or |DESCRIPTION or |CONTENT
    // id = #title, #description, #content
    tinyMceSelectText = function (id) {
            if ($('#id_of_tinymce_iframe').contents().find(id).length > 0) {
            var $itemNode = $('#content_editor_ifr').contents().find(id);
            var text = '';
            var items = $itemNode.contents();
            // clean up the span and other elements automatically inserted by tinymce
            $.each(items, function (i, val) {
                if ($(val).length == 0) {
                    return;
                }
                if ($(val).prop('nodeName') == 'BR') {
                        text += '<br/>';
                } else {
                    var t = $(val).text();
                    text += t;
                }
            })
            $itemNode.html(text);
            var len = $itemNode.contents().length - 1;
            var textNode = $itemNode.contents()[len];
            start = (start === undefined) ? 0 : start;    
            end = (end === undefined) ? textNode.length : end;

            var ed = tinyMCE.activeEditor;
            var range = ed.selection.getRng(true);

            start = (start === undefined)? 0 : start;
            end = (start === undefined)? 0 : end;

            try {
                range.setStart(textNode, start);
                range.setEnd(textNode, end);
                range.collapse(true);
                ed.selection.setRng(range);
                //ed.selection.collapse(false); // added to put carret to the last part of the text
                var items = $itemNode.contents();
            } catch (err) {}
        }
    }