Search code examples
javascriptjquerypagedown

How can i use multiple pagedown in one page?


I tried the below code for that, but it adds pagedown buttons to only the first .wmd-input.

enter image description here

if ($(".wmd-input").length > 0) {
    var converter = new Markdown.Converter();
    var help = function () { alert("Do you need help?"); }
    var options = {
        helpButton: { handler: help },
        strings: {quoteexample: "whatever you're quoting, put it right here"}
    };
    var editors = [];
    var i = 0;

    $(".wmd-input").each(function() {
        editors[i] = new Markdown.Editor(converter, "", options);
        editors[i].run();
        i = i + 1;
    });
}

Solution

  • Looks like i have to add unique ID for each element of wmd. I mean wmd-input, wmd-preview and wmd-button-bar. I modified this id attributes programmatically. This can be done with modifying manually but my length of inputs are dynamic.

      // make wmd's id's unique
      var pBox = $(this).parents(".box");
      $(pBox).find("textarea").attr('id', "wmd-input" + i);
      $(pBox).children("#wmd-preview").attr('id', "wmd-preview" + i);
      $(pBox).find("#wmd-button-bar").attr('id', "wmd-button-bar" + i);
    

    So when this ID attributes is set, i called the editor with postfix variable and problem solved.

    editors[i] = new Markdown.Editor(converters[i], i, options); 
    

    enter image description here

     if ($(".wmd-input").length > 0) {
        var converters = [];
        var editors = [];
        var i = 1;
        $(".wmd-input").each(function() {
          converters[i] = new Markdown.Converter();
          var help = function () { alert("Do you need help?"); }
          var options = {
             helpButton: { handler: help },
             strings: {quoteexample: "whatever you're quoting, put it right here"}
          };
    
          // make wmd's id's unique
          var pBox = $(this).parents(".box");
          $(pBox).find("textarea").attr('id', "wmd-input" + i);
          $(pBox).children("#wmd-preview").attr('id', "wmd-preview" + i);
          $(pBox).find("#wmd-button-bar").attr('id', "wmd-button-bar" + i);
    
          editors[i] = new Markdown.Editor(converters[i], i, options);
          editors[i].run();
          i = i + 1;
        });
     }