Disable WYSIWYG

Features
1

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.

3 Likes
2

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

3

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 :slight_smile:

3 Likes
4

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 !

5

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.

1 Like
6

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

7

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

8

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

9

I know nothing about portable Joplin. Sorry.

1 Like
10

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

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

11

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;
}
12

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

For example, in userchrome.css:

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

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

1 Like