我如何实现以下目标?
[第一张图片] 启动时:突出显示标题
[第二张图片] 按 Tab:突出显示说明
[第三张图片] 按 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) {}
}
}