Minimal WYSIWYG Editor #975

New Issue

OVERLORD · 2026-02-04T23:14:10+03:00

OVERLORD commented

2026-02-04 23:14:10 +03:00

Originally created by @gborgonovo on GitHub (Jan 5, 2019).

Hi there, thank you for this great tool.
I wonder if there is a way to reduce the size of the editor toolbar removing, or better hiding, some less used tools.
Especially when used with a mobile device the toolbar is to unwieldy. It would be great to have a button to hide/show the less used tools.
I understand this may be not for everyone, if you can suggest me where I could touch the code, it would be great.
Thank you
Giorgio

Originally created by @gborgonovo on GitHub (Jan 5, 2019). Hi there, thank you for this great tool. I wonder if there is a way to reduce the size of the editor toolbar removing, or better hiding, some less used tools. Especially when used with a mobile device the toolbar is to unwieldy. It would be great to have a button to hide/show the less used tools. I understand this may be not for everyone, if you can suggest me where I could touch the code, it would be great. Thank you Giorgio

OVERLORD closed this issue

2026-02-04 23:14:11 +03:00

OVERLORD commented

2026-02-04 23:14:20 +03:00

@gborgonovo commented on GitHub (Jan 8, 2019):

Since I think only me needs this I wonder where is the tinymce.init. I cannot find it in the code :(

@gborgonovo commented on GitHub (Jan 8, 2019): Since I think only me needs this I wonder where is the `tinymce.init`. I cannot find it in the code :(

OVERLORD commented

2026-02-04 23:14:24 +03:00

@ssddanbrown commented on GitHub (Jan 8, 2019):

Hi @gborgonovo,
The init function can be found here:

9700b7ccea/resources/assets/js/components/wysiwyg-editor.js (L378)

The build system, that's required for any JS changes, is detailed in the readme.

@ssddanbrown commented on GitHub (Jan 8, 2019): Hi @gborgonovo, The `init` function can be found here: https://github.com/BookStackApp/BookStack/blob/9700b7ccea51c45c23ac5531adc77d396b1e7fe5/resources/assets/js/components/wysiwyg-editor.js#L378 The build system, that's required for any JS changes, is detailed [in the readme](https://github.com/BookStackApp/BookStack#development--testing).

OVERLORD commented

2026-02-04 23:14:33 +03:00

@gborgonovo commented on GitHub (Jan 8, 2019):

Aha, found!
It is in
resources/assets/js/components/wysiwyg-editor.js
Well, indeed the right file is
public/dist/app.js
that I believe is the compiled file of the former. But I do not know how to compile it, so I changed it by hand... :'( ...if someone can suggest it...

@gborgonovo commented on GitHub (Jan 8, 2019): Aha, found! It is in `resources/assets/js/components/wysiwyg-editor.js` Well, indeed the right file is `public/dist/app.js` that I believe is the compiled file of the former. But I do not know how to compile it, so I changed it by hand... :'( ...if someone can suggest it...

OVERLORD commented

2026-02-04 23:14:37 +03:00

@gborgonovo commented on GitHub (Jan 8, 2019):

thank you!
I didn't see your answer.

@gborgonovo commented on GitHub (Jan 8, 2019): thank you! I didn't see your answer.

OVERLORD commented

2026-02-04 23:14:42 +03:00

@nickbe commented on GitHub (Apr 25, 2020):

I think this issue deserves a little configuration option in the settings. In fact it would be really helpful to limit the option for the users.

@nickbe commented on GitHub (Apr 25, 2020): I think this issue deserves a little configuration option in the settings. In fact it would be really helpful to limit the option for the users.

OVERLORD commented

2026-02-04 23:14:51 +03:00

@ssddanbrown commented on GitHub (Apr 25, 2020):

@nickbe I'm not intending to go down to this level of detail within the settings, especially with the intention to potentially switch out the editor soon.

Since this issue was opened, I have added events/hooks so the editor config can be altered via the "Custom HTML Head Content" setting, so the source JavaScript files don't have to be altered and re-compiled.

@ssddanbrown commented on GitHub (Apr 25, 2020): @nickbe I'm not intending to go down to this level of detail within the settings, especially with the intention to potentially switch out the editor soon. Since this issue was opened, I have added events/hooks so the editor config can be altered via the "Custom HTML Head Content" setting, so the source JavaScript files don't have to be altered and re-compiled.

OVERLORD commented

2026-02-04 23:14:58 +03:00

@nickbe commented on GitHub (Apr 29, 2020):

Hey Dan,

ah ok. Is there an example for this?
What editor do you plan to use in the future then?

@nickbe commented on GitHub (Apr 29, 2020): Hey Dan, ah ok. Is there an example for this? What editor do you plan to use in the future then?

OVERLORD commented

2026-02-04 23:15:02 +03:00

@ssddanbrown commented on GitHub (Apr 29, 2020):

@nickbe

ah ok. Is there an example for this?

Sure, Details can be found in the docs here: https://www.bookstackapp.com/docs/admin/hacking-bookstack/#bookstack-editor-events

As an example, you could alter the editor toolbar to only have the "bold" button like so:

<script>
window.addEventListener('editor-tinymce::pre-init', event => {
	const tinyMceConfig = event.detail.config;
	// Example, Only set have a bold button on the toolbar
	tinyMceConfig.toolbar = 'bold';
});
</script>

The current, full tinymce config for BookStack can be found here:
https://github.com/BookStackApp/BookStack/blob/v0.29.1/resources/js/components/wysiwyg-editor.js#L454

What editor do you plan to use in the future then?

Don't know for certain right now, Going to have a full review of options when we come to that point in the roadmap. That said, Prosemirror will be a frontrunner. I've enjoyed working with codemirror so that makes me confident in prosemirror. Seems to be very extensible and have a good set of base features that would suit BookStack while setting the groundwork for future ideas (Like live collaboration.)

@ssddanbrown commented on GitHub (Apr 29, 2020): @nickbe > ah ok. Is there an example for this? Sure, Details can be found in the docs here: https://www.bookstackapp.com/docs/admin/hacking-bookstack/#bookstack-editor-events As an example, you could alter the editor toolbar to only have the "bold" button like so: ```html <script> window.addEventListener('editor-tinymce::pre-init', event => { const tinyMceConfig = event.detail.config; // Example, Only set have a bold button on the toolbar tinyMceConfig.toolbar = 'bold'; }); </script> ``` The current, full tinymce config for BookStack can be found here: https://github.com/BookStackApp/BookStack/blob/v0.29.1/resources/js/components/wysiwyg-editor.js#L454 > What editor do you plan to use in the future then? Don't know for certain right now, Going to have a full review of options when we come to that point in the roadmap. That said, [Prosemirror](https://prosemirror.net/) will be a frontrunner. I've enjoyed working with codemirror so that makes me confident in prosemirror. Seems to be very extensible and have a good set of base features that would suit BookStack while setting the groundwork for future ideas (Like live collaboration.)

OVERLORD commented

2026-02-04 23:15:06 +03:00

@nickbe commented on GitHub (May 1, 2020):

Thanks - great! Again Bookstack really can do absolutely everything needed. 😄

Also I've checked out Prosemirror, since I'm looking to replace an editor myself for a different project. In fact I didn't come across this one so far.

Thanks for your enthusiasm with BookStack.

@nickbe commented on GitHub (May 1, 2020): Thanks - great! Again Bookstack really can do absolutely everything needed. 😄 Also I've checked out Prosemirror, since I'm looking to replace an editor myself for a different project. In fact I didn't come across this one so far. Thanks for your enthusiasm with BookStack.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#975