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

Markdown format for RTE in place editor

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



4 Replies

HH Harrison Haigler July 12, 2019 06:12 PM UTC

Here's my code

<ejs-inplaceeditor :emptyText="'Notes'" width="100%" autocomplete="off" :mode="'Inline'" :submitOnEnter="false"
v-model="selectedPerson.notes"
:model="{
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)"
></ejs-inplaceeditor>


PO Prince Oliver Syncfusion Team 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. 

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

[App.Vue] 
<ejs-inplaceeditor ref="rteObj" id="rte" type="RTE" :model="rteModel" :actionSuccess="actionSuccess"> 
</ejs-inplaceeditor> 

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

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. 

Regards, 
Prince 



HH Harrison Haigler 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.


BS Buvana Sathasivam Syncfusion Team 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. 
 
Regards, 
Buvana S 


Loader.
Live Chat Icon For mobile
Up arrow icon