Minimal WYSIWYG Editor

[gborgonovo]

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

[gborgonovo]

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

[ssddanbrown]

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

BookStack/resources/assets/js/components/wysiwyg-editor.js

Line 378 in 9700b7c

this.tinyMceConfig = this.getTinyMceConfig();

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

[gborgonovo]

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]

thank you!
I didn't see your answer.

[nickbe]

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.

[ssddanbrown]

@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.

[nickbe]

Hey Dan,

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

[ssddanbrown]

@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.)

[nickbe]

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.