Disable WYSIWYG

l-ucky · 2024-10-21T23:43:55.677Z

This solution doesn't work anymore. Manually disable WYSIWYG editor? - #7 by tessus

Can we get a simpler solution to disable the WYSIWYG view? I hate writing in MarkDown, accidentally clicking that cursed button, and then going back to the MarkDown view to see that the formatting has changed.

bush911 · 2024-10-22T03:44:09.524Z

I want to do this too, as WYSIWYG always makes my footnotes changed.

dpoulton · 2024-10-22T13:01:00.905Z

l-ucky:

This solution doesn't work anymore.

Some css elements / classes have changed in Joplin since then. Try using the below in userchrome.css.

button[title="Toggle editors"] {
    /* removes the MARKDOWN/RICH TEXT button */
    display: none !important;
}

It is not a simpler method but it does remove the button

adrianolszewski · 2024-10-26T22:52:17.987Z

Yep, I can confirm, using the old trick hides the entire icon toolbox, not just the WYSIWYG icon.

If only we could have just a little [ x ] checkbox disabling the WYSIWYG mode in the settings panel. So many users asked for it, where just one accidental clicking on it can ruin the markdown... And yet we still need to play with the custom CSS, which also stops working occasionally due to improvements.

Luckily the new CSS trick does work. Thank you @dpoulton !

t0dd · 2024-10-27T16:39:51.460Z

I like to be more explicit in my CSS when it is something used in all notes …
This is in my userchrome.css file:

/* removes the WYSIWYG (MARKDOWN/RICH TEXT) button */
/* …old method (Joplin 3.0.z and older) */
/*div.editor-toolbar div button {
    display: none !important;
}*/
/* …new method (Joplin 3.1.z and newer) */
div.editor-toolbar .markdown-active {
  display: none !important;
}

UPDATE: a prior version of this used div.editor-toolbar div button[title="Toggle editors"] But that relies on the English words "Toggle editors". .markdown-active is far better.

bush911 · 2024-10-28T00:25:17.732Z

There might be something I didn't get. I have used all css on this thread, the top right 2 buttons are still there.
I am using the latest Jopin on WIn 10 X64

t0dd · 2024-10-28T00:48:34.894Z

Once you change the CSS in that file, you need to restart Joplin.
UPDATE: Ugh! I goofed up the commenting. I fixed it above.

bush911 · 2024-10-28T00:54:16.339Z

Thank you for heads up. still no luck. I'm not sure whether is this related to portable Joplin. I am using portable version.

t0dd · 2024-10-28T00:55:08.650Z

I know nothing about portable Joplin. Sorry.

tomasz86 · 2024-10-28T17:20:23.530Z

Have you tried opening the CSS files directly from Joplin under Options → General → Appearance?

image393×197 11.1 KB

This way, you can be sure that you're editing the correct files. Also, if that still doesn't work, please post the content of the whole CSS file, as I'm assuming there may be some syntax issues there.

bush911 · 2024-10-28T23:53:54.196Z

Yes, I did like this.

usersyle.css

/* For styling the rendered Markdown */
/* Render horizontal lines (made with \-\-\- or \*\*\*) as an actual line across the editor. */
.cm-hr {
  border-top: 3px solid #777;
  display: block;
  line-height: 0px;
}

/*make markdown tokens for list into dots*/
.cm-overlay.cm-rm-list-token.cm-overlay.cm-rm-em-token
    {
color: transparent !important;
background-color: #DECB6B!important; 
height: 6px;
width: 6px;
border-radius: 50%;
display: inline-block;
vertical-align: bottom;
margin: 0 0px 8px 8px;
}

/*lists*/
.cm-variable-2, .cm-variable-3, .cm-keyword {
    color:	green !important;
}

.cm-rm-link {
    text-decoration:underline
}

.cm-strong {
    color:red!important;
    font-weight: bolder!important;
}

/*strikethrough checked boxes*/
span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox ~ span.cm-rm-checkbox {
    text-decoration: line-through;
    color:#5B5B5B!important;
}

/*HEADER STYLES*/
.cm-header-1{
    color: #794BBB!important;
    font-weight:bold;
}

.cm-header-2{
    color: #BD93F9!important;
}

.cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
    color:#CBBBE1!important;
    font-style:italic;
}

.cm-header-1 {
/*    line-height: 200% !important;*/
    display: inline-block; 
    margin-top:.8em;
    margin-bottom:.3em;
}

and userchrome.css

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */
/* removes the WYSIWYG (MARKDOWN/RICH TEXT) button */
/* …old method (Joplin 3.0.z and older) */
/*div.editor-toolbar div button {
    display: none !important;
}*/
/* …new method (Joplin 3.1.z and newer) */
div.editor-toolbar div button[title="Toggle editors"] {
    display: none !important;
}

personalizedrefriger · 2024-10-29T00:11:56.576Z

Does replacing button[title="Toggle editors"] with .markdown-active work?

For example, in userchrome.css:

div.editor-toolbar .markdown-active {
  display: none !important;
}

bush911 · 2024-10-29T00:58:42.603Z

Yep. It works.
You saved my day.
Thank YOU!

tessus · 2024-11-07T03:40:48.313Z

Yep, as @dpoulton mentioned, I have to fix my CSS. The dev team changed other stuff too. e.g. my note count is all messed up with my custom css.
Unfortunately I don't have much time right now to fix my css.

But thanks to different comments you can remove the button again.

personalizedrefriger · 2024-11-07T04:53:17.901Z

tessus:

Yep, as @dpoulton mentioned, I have to fix my CSS. The dev team changed other stuff too. e.g. my note count is all messed up with my custom css.
Unfortunately I don't have much time right now to fix my css.

I've opened a pull request.