Parse Markdown into HTML in JavaScript X-Editable field

Question

I am using the jQuery X-Editable edit-in-place library on a field and the JavaScript Marked Markdown Parser library to try and convert Markdown strings into HTML.

The goal is to show HTL and when it turns into a textarea edit field, to then how the Markdown. The Markdown will be what is saved and loaded from the backend in the live app.

I have setup a JSFiddle demo for this functionality...

http://jsfiddle.net/jasondavis/bfrrzz8h/

If you view the demo and click to edit the Description text and paste in this Markdown string # Marked in browser\n\nRendered by **marked** and click save, it will then alert you the parsed markdown to HTML string. THe problem is it does not update the DOM to show that new HTML string.

Any help in this please?

Marked library - https://github.com/chjj/marked
X-Editable library - https://github.com/vitalets/x-editable/

JavaScript from my demo

$('#task-description-modal').editable({
    type: 'textarea', // text|textarea|select|date|checklist
    url: '/updatetask',
    pk: 123,
    toggle: 'click', // click|dblclick|mouseenter|manual
    inputclass: 'task_description resizable',
    highlight: '#F1FFE7',
    mode: 'inline', // inline | popup
    placement: 'top',
    title: 'Enter Task Description',
    validate: function(value) {
        if ($.trim(value) === '') {
            return 'Task Description is Required';
        }
    },
    params: function(params) {
        //Addition params in addition to the default: pk, name, value
        return params;
    },
    success: function(response, newValue) {
        if (!response.success) return response.msg;
    }
});


$('#task-description-modal').on('save', function(e, params) {
    // Parse Description Markdown into HTML
    var markdownDescription = marked(params.newValue);
    alert(markdownDescription);
    $('#task-description-modal').html(markdownDescription);
    //$('#task-description-modal').html('test');
});


//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/updatetask',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!';
        } else {
           this.responseText = '';  
        }
    }
});

If you use a setTimeout, it will get set correctly. So maybe there is an event that you can hook that notifies you when span is ready to be set — Patrick Evans
– Patrick Evans, Commented Jun 5, 2015 at 23:49
@PatrickEvans I did notice before posting this question that I can post ` $('#task-description-modal').html(markdownDescription);` into the console and it will update correctly which is basically doing what your setTimeout would be doing so I do see that as being a possible solution! I will experiment with that as well thnak you — JasonDavis
– JasonDavis, Commented Jun 6, 2015 at 0:59
@PatrickEvans I just noticed your link goes to a working demo! That's great I had thought it linked to a setTimeout definition instead so thanks for the demo too! — JasonDavis
– JasonDavis, Commented Jun 6, 2015 at 1:14
@PatrickEvans I was able to tie into a different event that fires after the save and that works without using the setTimeout works great thanks for your help! — JasonDavis
– JasonDavis, Commented Jun 6, 2015 at 1:45

Mike 'Pomax' Kamermans · Accepted Answer · 2015-06-05 23:27:10Z

3

You're injecting your compiled HTML into the element you're using to get markdown input. This is simply setting yourself up for failure: have two elements, one for markdown text, and one to show the result, and switch between the two.

For instance, the following code already makes things work fine:

HTML:

<div style="margin: 50px">
  <span id="task-description-modal">Task Description text</span>
  <div id="processed"></div>
</div>

JS:

$('#task-description-modal').on('save', function(e, params) {
  var markdownDescription = marked(params.newValue);
  $('#processed').html(markdownDescription);
});

You just need to make sure to only show the element you intend to be shown depending on what the user has just done. Hidden #task-description-modal until the user clicks on #processed, at which point you hide #processed and force .focus() on #task-description-modal? Perfect.

answered Jun 5, 2015 at 23:27

Mike 'Pomax' Kamermans

54.3k17 gold badges133 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JasonDavis Over a year ago

Thanks for the answer. I tried your suggestions on this JSFiddle here jsfiddle.net/jasondavis/bfrrzz8h/4 and it does work to convert Markdown into HTML in that 2nd DIV. I need to figure out a way to make the parsed HTML be able to be clicked to edit though. Any ideas?

JasonDavis Over a year ago

I just now saw your last paragraph in which you mention the issue. I will try this out as well thanks. If you feel up for it would love to see a demo for the jiding/showing portion as i'm not 100% sure the click to edit will still function

JasonDavis Over a year ago

I updated this JSFiddle to attempt to Show and Hide the 2 but am not having to much luck so far on it working as expected jsfiddle.net/jasondavis/bfrrzz8h/6

JasonDavis Over a year ago

Nevermind I got it now using a different Event jsfiddle.net/jasondavis/bfrrzz8h/9

JasonDavis Over a year ago

Spoke to soon, now I see the issue you mentioned. My new method updates it great but then after a while when I go to edit it ends up editing the stripped html version instead of the markdown version so I will have to store 2 versions as you mentioned...what a pain!

|

Collectives™ on Stack Overflow

Parse Markdown into HTML in JavaScript X-Editable field

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related