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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Markdown format for RTE in place editor

Thread ID:





145910 Jul 12,2019 06:09 PM UTC Jul 24,2019 05:56 PM UTC Vue 4
Tags: InPlaceEditor
Harrison Haigler
Asked On July 12, 2019 06:09 PM UTC

I am using the Markdown RTE in the InPlaceEditor and it's working great. The only issue I'm running into is that it doesn't process the formatting when the editor is not selected.

Here is the RTE selected

Here is it not selected

Harrison Haigler
Replied On July 12, 2019 06:12 PM UTC

Here's my code

<ejs-inplaceeditor :emptyText="'Notes'" width="100%" autocomplete="off" :mode="'Inline'" :submitOnEnter="false"
editorMode: 'Markdown',
placeholder: 'Notes',
toolbarSettings: {
items: []
height: 600,
pasteCleanupSettings: 'plainTextFormatting'
name="none" type="RTE" data-underline='false' :cssClass="'basic-inline'"
@actionSuccess="patchPersonValue('notes', $event.value)"

Prince Oliver [Syncfusion]
Replied On July 16, 2019 10:48 AM UTC

Hi Harrison 

Thank you for contacting us. 

We have achieved customer requirement using the Marked third party plugin and In-place Editor actionSuccess event. In actionSuccess event, we have got the Rich Text Editor value and converted to a formatted html element using marked plugin. Then the formatted value is assigned to args.value. Please find the below code for your reference. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.19/marked.js" type="text/javascript"></script> 

<ejs-inplaceeditor ref="rteObj" id="rte" type="RTE" :model="rteModel" :actionSuccess="actionSuccess"> 

.  .  .  .  .  .  .  . .  .  .  . .  .  .  . .  .  .  . .  .  .  . .  .  .  . .  .  .  . .  .  . 

methods: { 
    actionSuccess: function(args) { // Triggered when click the submit action success 
        var val = args.value; // Get the entered value 
        var markedVal = marked(val); // Convert the marked to html element 
        args.value = markedVal; // Assign the In-place editor 

Let us know if you need any further assistance on this. 


Harrison Haigler
Replied On July 22, 2019 04:17 PM UTC

Thanks for getting back.

This does change the look, but after editing the text once the value is now set to html instead of markdown. So if someone goes to edit and save the text again, it will be return html as the value. I need markdown to persist.

Buvana Sathasivam [Syncfusion]
Replied On July 24, 2019 05:56 PM UTC

Hi Harrison, 
Thanks for your update. 
We have checked your shared query. But, unfortunately we were unable to reproduce your reported issue. The markdown value is persisted even though you edit the In-place Editor value again and again. we have used HTML for display format and Markdown as original value on edit. We have got the In-place Editor value using actionSuccess event. In this event, we have converted the marked text to HTML element using the Marked third party plugin and assigned to In-place Editor value. If you again click the editor and save the edited the text, args.value contains the marked value in actionSuccess event. 
Please find the below video for your reference. 
actionSuccess: function(args) { // Triggered after submit the editor 
       var markedContent = args.value; // Get the In-place Editor marked value 
       var htmlValue = marked(markedContent); // Convert the marked to html element 
       args.value = htmlValue; // Set to In-place Editor 
If still the issue persists, can you please share video for better understating your issue or replicate your issue on above shared sample. 
Buvana S 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon