Markdown format for RTE in place editor

[Harrison Haigler]

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]

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>

[Prince Oliver]

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 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/In-placeEditor858638913 

API link: https://ej2.syncfusion.com/vue/documentation/api/inplace-editor/#actionsuccess 

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

Regards, 

Prince 

[Harrison Haigler]

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]

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. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/inplace-2138026811 

  

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 

} 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Inplace_RTE1145179034 

  

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