在 JavaScript X-Editable 字段中将 Markdown 解析为 HTML

Question

我正在字段上使用 jQuery X-Editable 就地编辑库和 JavaScript 标记的 Markdown 解析器库来尝试将 Markdown 字符串转换为 HTML。

目标是展示HTL，当它变成一个textarea编辑字段，然后如何降价。 Markdown 将是在实时应用程序中从后端保存和加载的内容。

我已经为此功能设置了一个 JSFiddle 演示...

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

如果您查看演示并单击以编辑描述文本并粘贴此 Markdown 字符串 # Marked in browser\n\nRendered by **marked** 并单击保存，它会提醒您已解析的 markdown 为 HTML 字符串。问题是它没有更新 DOM 来显示新的 HTML 字符串。

这方面有什么帮助吗？

标记的图书馆 - https://github.com/chjj/marked
X-可编辑库 - https://github.com/vitalets/x-editable/

JavaScript 来自我的演示

$('#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 = '';  
        }
    }
});

Answer 1

您正在将已编译的 HTML 注入到您用于获取降价输入的元素中。这简直是在为失败做好准备：有两个元素，一个用于降价文本，一个用于显示结果，并在两者之间切换。

例如，下面的代码已经可以正常工作了：

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);
});

您只需要确保根据用户刚刚完成的操作只显示您打算显示的元素。隐藏 #task-description-modal 直到用户点击 #processed，此时你隐藏 #processed 并强制 .focus() 上 #task-description-modal？完美。

在 JavaScript X-Editable 字段中将 Markdown 解析为 HTML

Parse Markdown into HTML in JavaScript X-Editable field

javascript

markdown

jquery

x-editable