Code view button

Features
1

I don’t like the “Code view” button…

I can’t imagine I ever want to use the (for now experimental) WYSIWYG editor, so I liked it much more in previous versions where I choose not activate that editor.

Would like that to still be an option in Tools > Options and when the user don’t enable the new editor the “code view” button should not be visible.

2

At this moment in time if you want to hide the "code view" button you can use userchrome.css

Note that with v1.0.214 (possibly also in pre-releases but I haven't looked) there is no WYSIWYG entry in the "Layout button sequence" options. So without removing the css it looks like there would be no way of getting to the WYSIWYG editor (possibly a "plus" for you? :slight_smile: )

screenshot

1 Like
3

Code View button is most likely temporary. I hope to find a better way to switch between editors.

4

I prefer to leave the Code View button there but make it stand out less by removing it’s highlight.

a.button[title="Code View"] {
    border: none !important;
    background-color: white !important;
}
5

Thanks, @dpoulton and @RogerL. I tested both solutions and ended up with removing it completely.

And sorry, @laurent for coming on a bit harsh. Now that the code button is gone I see the beauty of the other UI adjustments in the new version :slight_smile:

6

I have often thought that it may be a bit disheartening for @laurent when, in response to requests, a new feature is introduced and then another group of people discuss ways of turning it off!! However I then realised that the ability in Joplin to actually do such a thing is, in itself, a remarkable feature to have.

1 Like
7

I used this to also disable WYSIWYG editor, but...

V1.2.6 seems to have broken this (the WYSIWG editor is enabled again). While I would use the WYSIWYG editor, every time it is used, if I have added [TOC] to the top and use the TOC sidebar option through customised CSS, the [TOC] entry gets deleted.

So, how do I change the CSS to again disable WYSIWYG? I'm happy to just be told the answer, but more usefully perhaps is how would I even go about finding out what changes to make myself (I know a little bit about CSS and can see what the original CSS was doing, but wouldn't know how to determine the title for the button).

8

To remove the WYSIWYG button in the newer versions of Joplin use:

 div.editor-toolbar div button {
	/* removes the WYSIWYG button */
	 display: none !important;
}

The Development Tools built into Joplin let you examine the CSS elements and classes used. Use the "pointer tool" to "probe" whatever you want to change looking for a suitable selector. They are not always easy to find. This page on creating selectors is also useful.

By the way, when trying to tweak parts of Joplin you may find a class that seems to control the bit you want to change but it has a weird random-looking name. Resist the temptation to use these as they are machine generated and will most likely change when a new version is built. That is why the above css uses div and button to select the WYSIWYG button and not a class (.tox-tbtn) which may not be permanent.

The "Joplin Customisation" wiki page has several v1.2.x examples.

1 Like