Using BookStack Editor Events. Try to use paste event #2723

Closed
opened 2026-02-05 04:55:39 +03:00 by OVERLORD · 4 comments
Owner

Originally created by @baevga on GitHub (Mar 23, 2022).

Attempted Debugging

  • I have read the debugging page

Searched GitHub Issues

  • I have searched GitHub for the issue.

Describe the Scenario

Hello

I found the page "Hacking BookStack" where discribed ability to use events for TinyMCE.
But there i see only two events pre-init and setup. Can i use others like paste?

I tried this but without success
window.addEventListener('editor-tinymce::paste', event => console.log('PASTE', event.detail));

Exact BookStack Version

v22.02.3

Log Content

No response

PHP Version

7.3

Hosting Environment

Ubuntu 20.04 and official installation script

Originally created by @baevga on GitHub (Mar 23, 2022). ### Attempted Debugging - [X] I have read the debugging page ### Searched GitHub Issues - [X] I have searched GitHub for the issue. ### Describe the Scenario Hello I found the page "Hacking BookStack" where discribed ability to use events for TinyMCE. But there i see only two events pre-init and setup. Can i use others like paste? I tried this but without success window.addEventListener('editor-tinymce::paste', event => console.log('PASTE', event.detail)); ### Exact BookStack Version v22.02.3 ### Log Content _No response_ ### PHP Version 7.3 ### Hosting Environment Ubuntu 20.04 and official installation script
OVERLORD added the 🐕 Support label 2026-02-05 04:55:39 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Mar 23, 2022):

Hi @baevga,
These are custom events that we emit, not specific editor events.
If you are looking to use the tinymce paste editor event you could get the editor instance from our setup event then listen for the paste event on the editor, like so:

<script>
window.addEventListener('editor-tinymce::setup', event => {

	const {editor} = event.detail;
	editor.on('paste', pasteEvent => {
		console.log('A tinymce paste event occurred!');
	});
	
});
</script>
@ssddanbrown commented on GitHub (Mar 23, 2022): Hi @baevga, These are custom events that we emit, not specific editor events. If you are looking to use the tinymce `paste` editor event you could get the editor instance from our setup event then listen for the paste event on the editor, like so: ```html <script> window.addEventListener('editor-tinymce::setup', event => { const {editor} = event.detail; editor.on('paste', pasteEvent => { console.log('A tinymce paste event occurred!'); }); }); </script> ```
Author
Owner

@baevga commented on GitHub (Mar 24, 2022):

Wow, thank you

But i still can't figure out how to get my main goal, maybe you can give me an advice.

I try to clean width atribute and wrap table in DIV for overflow scroll after paste from word. I checked tinymce site and found that it has specific plugin for that purposes https://www.tiny.cloud/docs/plugins/opensource/paste/

Is it possible to enable it and work with it events?

Or maybe it is possible to do with example you sent to me above?

Thank you

@baevga commented on GitHub (Mar 24, 2022): Wow, thank you But i still can't figure out how to get my main goal, maybe you can give me an advice. I try to clean width atribute and wrap table in DIV for overflow scroll after paste from word. I checked tinymce site and found that it has specific plugin for that purposes https://www.tiny.cloud/docs/plugins/opensource/paste/ Is it possible to enable it and work with it events? Or maybe it is possible to do with example you sent to me above? Thank you
Author
Owner

@ssddanbrown commented on GitHub (Mar 24, 2022):

Hi @baevga,
That paste open source plugin is already active in our default configuration of the editor:
8594f42584/resources/js/wysiwyg/config.js (L72)
Not sure how you're expecting to use that plugin to achieve what you defined though.

I try to clean width atribute and wrap table in DIV for overflow scroll after paste from word. I checked tinymce site and found that it has specific plugin for that purposes https://www.tiny.cloud/docs/plugins/opensource/paste/

If you're intending to alter the pasted content you may want to listen to the PastePostProcess editor event:
https://www.tiny.cloud/docs/advanced/events/#pasteevents
You'll have to see what that provides, and likely manipulate the content if possible before it gets added to the editor.
Depending on exactly what you're doing, you may end up fighting with the editor's configured filtering in terms of what elements and attributes are allowed, and hence might require tweaking of the editor config.

Just to confirm, none of these style of tweaks are considered supported nor stable in any way.

@ssddanbrown commented on GitHub (Mar 24, 2022): Hi @baevga, That paste open source plugin is already active in our default configuration of the editor: https://github.com/BookStackApp/BookStack/blob/8594f4258417e0e7a4a59c17d006d87dc84e9f3a/resources/js/wysiwyg/config.js#L72 Not sure how you're expecting to use that plugin to achieve what you defined though. > I try to clean width atribute and wrap table in DIV for overflow scroll after paste from word. I checked tinymce site and found that it has specific plugin for that purposes https://www.tiny.cloud/docs/plugins/opensource/paste/ If you're intending to alter the pasted content you may want to listen to the `PastePostProcess` editor event: https://www.tiny.cloud/docs/advanced/events/#pasteevents You'll have to see what that provides, and likely manipulate the content if possible before it gets added to the editor. Depending on exactly what you're doing, you may end up fighting with the editor's configured filtering in terms of what elements and attributes are allowed, and hence might require tweaking of the editor config. Just to confirm, none of these style of tweaks are considered supported nor stable in any way.
Author
Owner

@baevga commented on GitHub (Mar 25, 2022):

Thank you for your help!

@baevga commented on GitHub (Mar 25, 2022): Thank you for your help!
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2723