We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

WYSIWYG Editing Markdown Content

Hey all,

I am using the Rich Text Editor in a CRM project, in which we want the user to be able to edit the content either in WYSIWYG mode, or in Markdown code mode.
On save, we want to extract the text in Markdown format, for storage in our database.

Rationale- in case you're wondering "why not use the HTML mode", my rationale is-
+ We want zero risk of scripts, or external file references
+ The limited tagging of markdown suits us perfectly for this purpose- Headings, basic text formatting, and the ability to include images and links.
+ Simpler to read and manage in our database- which is MONGODB ( thus, JSON data structures ).  I'd prefer not to store HTML inside JSON. 

I've followed the demo here;

And got it working on IONIC 4 / Angular 7.

However the editor is only showing markdown code, with no WYSIWYG view.
( This is the same behavior shown in the demo, just not what we want for the end product. )

How can I change this?

1 Reply

PO Prince Oliver Syncfusion Team June 27, 2019 04:25 PM UTC

Hi Michael, 
 
Thank you for contacting us. 
 
You can easily convert the markdown to HTML content using third-party library(like marked.js) in application end. In below demo, we have converted the markdown content into HTML content when you click the preview button. 
  
  
And also we have provided the demo sample for preview the markdown changes immediately in the preview area using marked.js third party plugin when you click on the split Editor. This third party plugin is used to make live preview. Please find the below screenshot. 
 
 
 
  
  
  
If the above sample doesn’t meet your requirement, please share us more information about your requirement. 
  
Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon