self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-03-29 21:21:15 +02:00
Code Issues Releases Activity
joplin/docs/blog/20200314-001555/index.html
Laurent Cozic ca01eb35aa Update website
2021-07-10 11:43:35 +01:00

345 lines
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<!--
!!! WARNING !!!
This file was auto-generated from readme/blog/20200314-001555.md and any manual change
made to it will be overwritten. To make a change to this file please modify
the source Markdown file:
https://github.com/laurent22/joplin/blob/dev/readme/blog/20200314-001555.md
-->
<head>
<meta
charset="utf-8"
http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1"
/>
<link rel="icon" href="&#x2F;images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Joplin website" />
<link
rel="stylesheet"
href="&#x2F;css/bootstrap5.0.2.min.css"
as="style"
/>
<link rel="stylesheet" href="&#x2F;css/fontawesome-all.min.css?t=1625913797829">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
rel="stylesheet"
as="style"
media="all"
onload="this.media='all'; this.onload = null"
/>
<link rel="stylesheet" href="&#x2F;css/site.css?t=1625913797829" as="style" />
<title>Experimental WYSIWYG editor in Joplin | Joplin</title>
</head>
<body class="website-env-prod">
<div class="container-fluid generic-template -page" id="main-container">
<div class=" navbar-main white-bg" id="nav-section">
<div class="container">
<div class="row">
<div class="col-3">
<a href="/">
<img
src="&#x2F;images/logo-text-blue.svg"
alt=""
id="top-logo"
width="180"
/>
</a>
</div>
<div class="col-9 text-right d-none d-md-block">
<a href="/help/" class="fw500">Help</a>
<a href="https:&#x2F;&#x2F;discourse.joplinapp.org&#x2F;" class="fw500">Forum</a>
<a class="button-link btn-blue donate-button" href="/donate">
<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support
</a> </div>
<div class="col-9 text-right d-block d-md-none">
<span class="pointer"
><img
src="&#x2F;images/mobile-menu-black-open-icon.png"
id="open-menu-mobile"
alt=""
/></span>
&nbsp;&nbsp;
<div id="menu-mobile">
<div>
<div class="text-right">
<img
src="&#x2F;images/close-icon.png"
alt=""
class="pointer"
id="close-menu-mobile"
/>
</div>
<div class="text-center menu-mobile-top">
<a href="https:&#x2F;&#x2F;discourse.joplinapp.org&#x2F;" class="fw500 mobile-menu-link">Forum</a>
<a href="/help/" class="fw500 mobile-menu-link">Help</a>
</div>
<div class="menu-mobile-buttons">
<a class="button-link btn-blue donate-button" href="/donate">
<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support
</a> </div>
</div>
<div id="toc-mobile"><div><ul>
<li>
<p>Applications</p>
<ul>
<li><a href="/desktop/">Desktop application</a></li>
<li><a href="/mobile/">Mobile applications</a></li>
<li><a href="/terminal/">Terminal application</a></li>
<li><a href="/clipper/">Web Clipper</a></li>
</ul>
</li>
<li>
<p>Support</p>
<ul>
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
<li><a href="/markdown/">Markdown Guide</a></li>
<li><a href="/e2ee/">How to enable end-to-end encryption</a></li>
<li><a href="/conflict/">What is a conflict?</a></li>
<li><a href="/debugging/">How to enable debug mode</a></li>
<li><a href="/rich_text_editor/">About the Rich Text editor limitations</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li>
<p>Joplin API - Get Started</p>
<ul>
<li><a href="/api/overview/">Joplin API Overview</a></li>
<li><a href="/api/get_started/plugins/">Plugin development</a></li>
<li><a href="/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
</ul>
</li>
<li>
<p>Joplin API - References</p>
<ul>
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
<li><a href="/api/references/rest_api/">Data API</a></li>
<li><a href="/api/references/plugin_manifest/">Plugin manifest</a></li>
<li><a href="/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
<li><a href="/api/references/plugin_theming/">Plugin theming</a></li>
</ul>
</li>
<li>
<p>Development</p>
<ul>
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
<li><a href="/spec/e2ee/">End-to-end encryption spec</a></li>
<li><a href="/spec/history/">Note History spec</a></li>
<li><a href="/spec/sync_lock/">Sync Lock spec</a></li>
<li><a href="/spec/plugins/">Plugin Architecture spec</a></li>
<li><a href="/spec/search_sorting/">Search Sorting spec</a></li>
<li><a href="/spec/server_file_url_format/">Server: File URL Format</a></li>
<li><a href="/spec/server_delta_sync/">Server: Delta Sync</a></li>
<li><a href="/spec/server_sharing/">Server: Sharing</a></li>
</ul>
</li>
<li>
<p>Google Summer of Code 2021</p>
<ul>
<li><a href="/gsoc2021/index/">Google Summer of Code 2021</a></li>
<li><a href="/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
<li><a href="/gsoc2021/ideas/">Project Ideas</a></li>
</ul>
</li>
<li>
<p>About</p>
<ul>
<li><a href="/changelog/">Changelog (Desktop App)</a></li>
<li><a href="/changelog_cli/">Changelog (CLI App)</a></li>
<li><a href="/changelog_server/">Changelog (Server)</a></li>
<li><a href="/stats/">Stats</a></li>
<li><a href="/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div></div>
<div>
<p class="light-blue mobile-menu-link-bottom text-center">
Copyright (C) 2016-2021 Laurent&nbsp;Cozic
<br/>
<a href="/privacy/" class="fw500">Privacy Policy</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-container page-20200314-001555">
<div class="container">
<div class="row content-wrapper">
<div id="toc"><div><ul>
<li>
<p>Applications</p>
<ul>
<li><a href="/desktop/">Desktop application</a></li>
<li><a href="/mobile/">Mobile applications</a></li>
<li><a href="/terminal/">Terminal application</a></li>
<li><a href="/clipper/">Web Clipper</a></li>
</ul>
</li>
<li>
<p>Support</p>
<ul>
<li><a href="https://discourse.joplinapp.org">Joplin Forum</a></li>
<li><a href="/markdown/">Markdown Guide</a></li>
<li><a href="/e2ee/">How to enable end-to-end encryption</a></li>
<li><a href="/conflict/">What is a conflict?</a></li>
<li><a href="/debugging/">How to enable debug mode</a></li>
<li><a href="/rich_text_editor/">About the Rich Text editor limitations</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</li>
<li>
<p>Joplin API - Get Started</p>
<ul>
<li><a href="/api/overview/">Joplin API Overview</a></li>
<li><a href="/api/get_started/plugins/">Plugin development</a></li>
<li><a href="/api/tutorials/toc_plugin/">Plugin tutorial</a></li>
</ul>
</li>
<li>
<p>Joplin API - References</p>
<ul>
<li><a href="https://joplinapp.org/api/references/plugin_api/classes/joplin.html">Plugin API</a></li>
<li><a href="/api/references/rest_api/">Data API</a></li>
<li><a href="/api/references/plugin_manifest/">Plugin manifest</a></li>
<li><a href="/api/references/plugin_loading_rules/">Plugin loading rules</a></li>
<li><a href="/api/references/plugin_theming/">Plugin theming</a></li>
</ul>
</li>
<li>
<p>Development</p>
<ul>
<li><a href="https://github.com/laurent22/joplin/blob/dev/BUILD.md">How to build the apps</a></li>
<li><a href="/spec/e2ee/">End-to-end encryption spec</a></li>
<li><a href="/spec/history/">Note History spec</a></li>
<li><a href="/spec/sync_lock/">Sync Lock spec</a></li>
<li><a href="/spec/plugins/">Plugin Architecture spec</a></li>
<li><a href="/spec/search_sorting/">Search Sorting spec</a></li>
<li><a href="/spec/server_file_url_format/">Server: File URL Format</a></li>
<li><a href="/spec/server_delta_sync/">Server: Delta Sync</a></li>
<li><a href="/spec/server_sharing/">Server: Sharing</a></li>
</ul>
</li>
<li>
<p>Google Summer of Code 2021</p>
<ul>
<li><a href="/gsoc2021/index/">Google Summer of Code 2021</a></li>
<li><a href="/gsoc2021/pull_request_guidelines/">How to submit a GSoC pull request</a></li>
<li><a href="/gsoc2021/ideas/">Project Ideas</a></li>
</ul>
</li>
<li>
<p>About</p>
<ul>
<li><a href="/changelog/">Changelog (Desktop App)</a></li>
<li><a href="/changelog_cli/">Changelog (CLI App)</a></li>
<li><a href="/changelog_server/">Changelog (Server)</a></li>
<li><a href="/stats/">Stats</a></li>
<li><a href="/donate/">Donate</a></li>
</ul>
</li>
</ul>
</div></div>
<div class="main-content">
<div class="alert alert-danger alert-env-dev" role="alert">
Running in prod mode!
</div>
<div class="donate-links">
<p><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=E8JMYD2LQ8MMA&amp;lc=GB&amp;item_name=Joplin+Development&amp;currency_code=EUR&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted"><img src="https://joplinapp.org/images/badges/Donate-PayPal-green.svg" alt="Donate using PayPal"></a> <a href="https://github.com/sponsors/laurent22/"><img src="https://joplinapp.org/images/badges/GitHub-Badge.svg" alt="Sponsor on GitHub"></a> <a href="https://www.patreon.com/joplin"><img src="https://joplinapp.org/images/badges/Patreon-Badge.svg" alt="Become a patron"></a> <a href="https://joplinapp.org/donate/#donations"><img src="https://joplinapp.org/images/badges/Donate-IBAN.svg" alt="Donate using IBAN"></a></p>
</div>
<h1>Experimental WYSIWYG editor in Joplin<a name="experimental-wysiwyg-editor-in-joplin" href="#experimental-wysiwyg-editor-in-joplin" class="heading-anchor">🔗</a></h1>
<p>The latest pre-release of Joplin (<a href="https://github.com/laurent22/joplin/releases/tag/v1.0.194">v1.0.194</a>) includes a new WYSIWYG editor, a prototype for now, but a first step towards integrating this feature into Joplin.</p>
<p><img src="images/20200314-001555_0.gif" alt=""></p>
<p>WYSIWYG is probably the most requested feature in Joplin - it's the second most up-voted on GitHub, and one of the most viewed and commented on post in the forum.</p>
<p>Please note however that this feature is experimental at this stage - don't use it for important notes as you may lose the content of the note, or it might get corrupted.</p>
<p>If you are interested in this editor though it might make sense to use it for less important notes, so as to evaluate it and report bugs and issues you might find.</p>
<p>This is a technically challenging component because it needs to convert between Markdown and HTML, and vice-versa. Joplin already includes robust HTML-to-MD and MD-to-HTML conversion modules (battle tested respectively in the web clipper and the desktop/mobile client), and this new editor is based on this technology. It is possible however that there are various edge cases that I have not thought of.</p>
<p>Thus your support to test and validate (or invalidate) this idea would be very much appreciated! If it turns out it does not make sense technically to support this editor, for example if some bugs are critical and can't be solved, it might be removed at a later date, but hopefully all bugs will be fixable. <strong>Please report issues you might find on GitHub,</strong> <a href="https://github.com/laurent22/joplin/issues/176"><strong>on this post</strong></a>. In there, there's also a list of features that remains to be implemented.</p>
<p>At the moment, the feature is a bit hidden. <strong>To enable it, go into the menu View =&gt; Layout button sequence, and choose &quot;Split / WYSIWYG&quot;</strong>. Then click on the Layout button to toggle between modes.</p>
<p><strong>Missing features</strong></p>
<p>Some features are missing, most notably the ability to insert plugin blocks such as Katex or Mermaid, so you would have to create them first in the split view. Once created, they can however be edited.</p>
<p>One issue to be aware of, one that cannot be easily fixed, is that <strong>some Markdown plugins are not supported by the editor</strong>. This is because once the Markdown is converted to HTML, and displayed in the WYSIWYG editor, it cannot be converted back to the original Markdown. Some plugins are supported, such as Katex, Fountain or Mermaid. But others are not, like the multi-md table. So if you open a note that contains a multi-md table in the WYSIWYG editor and save, the original multi-md Markdown will be lost, and you'll get back a plain Markdown table.</p>
<p>Again if you find any issue, please report it on GitHub: <a href="https://github.com/laurent22/joplin/issues/176">https://github.com/laurent22/joplin/issues/176</a></p>
<p><img src="images/20200314-001555_1.gif" alt=""></p>
<hr>
<p>url: <a href="https://www.patreon.com/posts/experimental-in-34246624">https://www.patreon.com/posts/experimental-in-34246624</a><br>
published_at: 2020-03-14T00:15:55.000+00:00</p>
<div class="bottom-links">
<a href="https://github.com/laurent22/joplin/blob/dev/readme/blog/20200314-001555.md">
<i class="fab fa-github"></i> Improve this doc
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="darkblue-bg">
<div class="container">
<div class="row">
<div class="col-3 d-none d-md-block">
<img src="&#x2F;images/logo-text.svg" alt="" width="150" />
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<img
src="&#x2F;images/logo-text.svg"
width="120"
class="img-center d-block d-md-none"
alt=""
/>
<br class="d-block d-md-none" />
<p class="text-center-sm">Copyright (C) 2016-2021 Laurent Cozic</p>
</div>
<div class="col-12 col-md-6 right-links">
<p class="text-right text-center-sm">
<a href="https://github.com/laurent22/joplin/" class="github-link"><i class="fab fa-github"></i> GitHub Repository</a>
<a href="/privacy/">Privacy Policy</a>
</p>
</div>
</div>
</div>
</footer>
</div>
<script
src="&#x2F;js/jquery-3.6.0.min.js"
rel="preload"
as="script"
></script>
<script src="&#x2F;js/script.js?t=1625913797829"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103586105-1', 'auto');
ga('send', 'pageview');
</script> </body>
</html>
Reference in New Issue View Git Blame Copy Permalink