[英]I want to capture keyboard events in tinymce editor using a userscript (i.e add keyboard shortcuts)
I want to add keyboard shortcuts to the button in tinymce editor. 我想在tinymce编辑器中为按钮添加键盘快捷键。 The problem is that I don't have access to the source code of the website. 问题是我无法访问网站的源代码。 So this needs to be done using userscript(ie tampermonkey, greasemonkey). 所以这需要使用usercript(即tampermonkey,greasemonkey)来完成。
I have successfully created a script that added the shortcuts if I execute the script form the console available in the development tools of the browser, but this code does not work in tampermonkey or greasemonkey. 我已经成功创建了一个脚本,如果我从浏览器的开发工具中可用的控制台执行脚本,则添加了快捷方式,但此代码在tampermonkey或greasemonkey中不起作用。 The script is as follows: 脚本如下:
function simulate(element, eventName)
{
var options = extend(defaultOptions, arguments[2] || {});
var oEvent, eventType = null;
for (var name in eventMatchers)
{
if (eventMatchers[name].test(eventName)) { eventType = name; break; }
}
if (!eventType)
throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
if (document.createEvent)
{
oEvent = document.createEvent(eventType);
if (eventType == 'HTMLEvents')
{
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else
{
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}
element.dispatchEvent(oEvent);
}
else
{
options.clientX = options.pointerX;
options.clientY = options.pointerY;
var evt = document.createEventObject();
oEvent = extend(evt, options);
element.fireEvent('on' + eventName, oEvent);
}
return element;
}
function extend(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
}
var eventMatchers = {
'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
'MouseEvents': /^(?:click|dblclick|mouse(?:down|up|over|move|out))$/
}
var defaultOptions = {
pointerX: 0,
pointerY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false,
metaKey: false,
bubbles: true,
cancelable: true
}
tinymce.activeEditor.on('keydown', function(e) {
var e = e || window.event; // for IE to cover IEs window object
if(e.altKey && e.which == 81) { //Alt + Q
//alert('Keyboard shortcut working!');
simulate(document.evaluate('//div[@id="mceu_3"]/button', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue, "click");
return false;
}
});
In the above code div[@id="mceu_3"]/button
is the div
tag that contain the button to be triggered by the key combination. 在上面的代码中, div[@id="mceu_3"]/button
是div
标签,其中包含由组合键触发的按钮。
Could any one please provide a solution, also I don't have much knowledge of tinymce editor, so a simplified explanation will be more helpful. 任何人都可以提供解决方案,我对tinymce编辑器也不太了解,所以简化的解释会更有帮助。
Thanks in advance. 提前致谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.