Topic: Cannot focus on the editor using tab key
Can I set tabindex to the editor so that it can be focused using the tab key? Or how can I achieve this?
Get your own copy
Don't hesitate! Just download and test it all by yourself for free!
Re: Cannot focus on the editor using tab key
You should not have any problem tabbing into the editor or even putting the focus in the editor on window/page load without tabbing, if that is your desired result. Have you tried it yet?
Re: Cannot focus on the editor using tab key
coopster wrote:
You should not have any problem tabbing into the editor or even putting the focus in the editor on window/page load without tabbing, if that is your desired result. Have you tried it yet?
I've found that tabindex does not work with the editor.
For example, if you have a "message subject" tabindex=3 and then the textarea for entering the message as "tabindex=4", the browser SHOULD jump from the subject input to the editor on a TAB keypress (i.e. switching from tabindex 3 to 4), but it does not.
However, I have written a small plugin which "clones" any styles and attributes desired from the textarea to the editor.
For example, if the textarea (or whatever element the editor replaced) has a tabindex of "4", the editor also gets that tabindex. Also, any colors, attributes or anything else that the textarea has are cloned to the editor.
In the directory "/tinymce/jscripts/tiny_mce/plugins" make a new directory named "clone" and copy the code below into a file named "editor_plugin_src.js" and also as "editor_plugin.js" (two copies of the same file with different names).
/**
* editor_plugin_src.js
*
* Clone selected styles and attributes of the element
* that the editor replaced.
*
* Copyright 2009, 2012 Moxiecode Systems AB
* Released under LGPL License.
*
* Copyright 2012 Roger A. Krupski
* Released under LGPL License.
*
* License: http://tinymce.moxiecode.com/license
* Contributing: http://tinymce.moxiecode.com/contributing
*/
(function () {
var DOM = tinymce.DOM;
tinymce.create('tinymce.plugins.ClonePlugin', {
init : function (ed, url) {
var t = this;
ed.onPostRender.add (function (ed, cm) {
var s, c, d, v;
var ifr = DOM.get(ed.id + '_ifr'); // editor iframe element
var body = ed.getBody() // editor body element
var txt = ed.getElement(); // element that tinymce replaced (usually a textarea)
s = ed.getParam('theme_advanced_clone_styles', false); // get list of styles to clone
if (s) {
s = s.split(',');
c = s.length;
while (c--) {
d = t.camelCase(s[c]); // convert dash-ed to camelCase if necessary
v = DOM.getStyle(txt, d, true); // get runtime style
if (v) {
DOM.setStyle(body, d, String(v)); // set editor body styles
}
}
}
s = ed.getParam('theme_advanced_clone_attributes', false); // get list of attributes to clone
if (s) {
s = s.split(',');
c = s.length;
while (c--) {
d = t.camelCase(s[c]); // convert dash-ed to camelCase if necessary
v = DOM.getAttrib(txt, d, false); // get runtime attribute or false if none
if (v) {
DOM.setAttrib(ifr, d, String(v)); // set editor iframe attributes
}
}
}
});
},
// convert dash-ed to camelCase
camelCase : function (h) {
return h.replace(/\-(\D)/g, function (a, b) {
return b.toUpperCase();
});
},
getInfo : function () {
return {
longname : 'Clone',
author : 'Roger A. Krupski',
authorurl : 'three-dog.homelinux.com',
infourl : 'mailto:rakrupski@verizon.net',
version : tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
// Register plugin
tinymce.PluginManager.add('clone', tinymce.plugins.ClonePlugin);
})();...and then in your editor config, specify the styles and attributes you wish to clone (example):
'theme_advanced_clone_styles' : 'color,background-color,font-family,font-size',
'theme_advanced_clone_attributes' : 'tab-index',Of course, you also need to specify the "clone" plugin in your list of plugins for it to work:
Example: 'plugins' : 'bbcode,clone,contextmenu,media,paste,tinyautosave,wordcount',
Note you don't need to clone color or background color or anything else in the example. You only need to close "tab-index" (although you CAN clone anything you want).
Hope this helps.....
"Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov
Re: Cannot focus on the editor using tab key
Thanks @Krupski...will defenately try this!!!