Comments (2)
Thank you this works.
I created a new javascript file CaptureKeys.js
export function CaptureKeys( editor ) {
editor.editing.view.document.on( 'keydown', ( evt, data ) => {
console.log( 'Pressed key: ' + data.domEvent.key );
// Do something on keydown...
})
}
and then importing import {CaptureKeys} from '../../CaptureKeys.js
in my vue editor file.
I first got TypeError: Cannot read property 'getAttribute' of null
But could fix it by copying the vue.config.js from #55 (comment)
from ckeditor5-vue.
Hello, unfortunately you can use only component events which are presented in our documentation. However, you can listen to keydown
event directly from the editing area and capture all keys.
To do that, let's prepare a simple plugin:
function CaptureKeys( editor ) {
editor.editing.document.view.on( 'keydown', ( evt, data ) => {
console.log( data );
console.log( 'Pressed key: ' + data.domEvent.key );
// Do something on keydown...
}
}
And include it to the editor config:
// ...
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
Font,
CaptureKeys
],
// ...
Now, just open the editor and all keys will be logged to the console:
from ckeditor5-vue.
Related Issues (20)
- blur event not working properly version 35.0.0 HOT 2
- ckeditor vue plugins css build error (with any plugin) HOT 4
- strikethrough and underline not listing as toolbar items
- Automated tests and coverage fails on Windows HOT 2
- CKFiner errors: CKEditorError: window.CKFinder is undefined & undefined (reading 'modal') HOT 1
- `emitDebouncedInputEvent` causes performance issue with long and complex content HOT 3
- Performance issues in processing content with multiple paragraphs containing multiple inline widgets HOT 2
- [VUE] Align the release process to the changes in ckeditor5-dev
- Custom build issues (object, instead of function) - Documentation issues? HOT 1
- v-model, events "input" or "update: model-value" do not work in source edit mode HOT 3
- Uncaught ReferenceError: global is not defined HOT 1
- Migrate to CircleCI in ckeditor/ckeditor5-vue
- Add link popup have wrong position in Modal with fixed mask HOT 3
- Uncaught SyntaxError when integrating a build from the online builder when using `npm add file:./ckeditor5` in Vue HOT 6
- Table captions is absent HOT 3
- Add support for multi-root editor
- How to set the height of the editor in Vue3? I set CSS, but none of it worked HOT 8
- vue3+ts+vite use custom build HOT 1
- Allow control of batchType options in model-value watcher
- Investigate warning
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor5-vue.