CODEWITHSUNDEEP
javascriptmarkdown
Wizard
Wizard

Reputation: 22093

render multiple markdown docs to HTML using editor.md

I have such a template

<div class="post-text">
    <div id='article-editormd-view'>
        <textarea style="display:none;">
{{ article.content }}
        </textarea>
    </div>
</div>

Which could be rendered as html using editor.md:

$(function(){
      editormd.markdownToHTML("article-editormd-view", {
      htmlDecode      : "style,script,iframe",  // you can filter tags decode
      emoji           : true,
      taskList        : true,
      lineNumbers     : false,
    });

article-editormd-view is ID,

When I tried to render multiple comments in a for loop like:

{% for comment in page.object_list %}
<div class='comment-editormd-view'>
    <textarea style="display:none;">
 {{ comment.body }}
    </textarea>
 </div>
{% endfor %}


editormd.markdownToHTML("comment-editormd-view", {
htmlDecode      : "style,script,iframe",  // you can filter tags decode
emoji           : true,
taskList        : true,
lineNumbers     : false,

It's not working,

I read through the official docs but not found a solution there.

Upvotes: 1

Views: 301

Answers (1)

dragonwocky
dragonwocky

Reputation: 61

comment-editormd-view is supposed to be the element's ID. So, your first example of a single textbox works because you've set it as the element's ID.

However, when you tried doing it with a for loop, you set it as element's class. So, editor.md is trying to work its magic on a single element with the selector #comment-editormd-view, rather than on all elements with the selector .comment-editormd-view.

A possible solution is simply by using a counter, with a different ID per div and a script that creates a textbox for each div. Something like this (code untested):

<script> var count = 0 </script>

{% for comment in page.object_list %}
  <script> count++ </script>

  <div id={{'comment-editormd-view' + count}}>
    <textarea style="display: none">
      {{ comment.body }}
    </textarea>
  </div>

  <script>
    editormd.markdownToHTML('comment-editormd-view' + count, {
      htmlDecode : 'style, script, iframe',
      emoji : true,
      taskList : true,
      lineNumbers : false
    });
  </script>

{% endfor %}

HTML element IDs: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

HTML element classes: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

Upvotes: 2

Related Questions