How to add help button (and help) to markdown editor?

Question

Successfully integrated markdown editor found here:

https://github.com/svivian/q2a-markdown-editor

I would like to add a help button to guide users if needed.

I downloaded PageDown and studied it.  Their in-browser example shows how to add the button and fire-off an alert.  So, I thought I'd try that first.  In "qa-markdown-editor.php" I changed "load_script" as follows:

 

function load_script($fieldname)

{

    return

      'var help = function () {alert("Do you need help?");}' . "\n" .

      ' var options = { helpButton: { handler: help } };' . "\n" .

      'var converter = Markdown.getSanitizingConverter();' . "\n" .

      'var editor = new Markdown.Editor(converter, "-'.$fieldname.'", options);' . "\n" .

      'editor.run();' . "\n";

}

 

The help button shows-up (too far to the right, but that's a different problem).  The tooltip shows-up.  However, it will not fire the alert.

Help?

 

Comments

With markdown editor is it possible to load images in local site rather than hotlinking the image to other sites?

I have integrated the editor but only problem is images which I want to host locally.

---

Funny enough, I am looking into that next.  I suspect that the solution will be a bit more complex.  There are a number of good threads on this subject that I am reading through before looking at code.

---

yea I believe it would be complex to implement, please let us know here if you come up with some solution...

Answer 1

OK, here it is, figured it out:

 

function load_script($fieldname)

{

    return

        //************************* START MODIFICATION

        'var help = function () {alert(' . '"EDITOR HELP:\n\n' . 

        'Your help text here.\n\n' . 

        'It can be multiple lines.\n\n' . 

        ');}' . "\n" .

        'var options = { handler: help, title: "Editor help" };' . "\n" .

        //************************* END MODIFICATION

        'var converter = Markdown.getSanitizingConverter();' . "\n" .

        'var editor = new Markdown.Editor(converter, "-'.$fieldname.'", options);' . "\n" .

        'editor.run();' . "\n";

}

 

You might also want to modify the CSS for the markdown plugin in order to make sure that the editor and preview windows expand to fill the content area:

 

.wmd-input {

    /* 604 */

   width: 100%;    /* <<<<< THIS CHANGED  */

   height: 250px;

   margin: 0 0 10px;

   padding: 2px;

   border: 1px solid #ccc;

}

.wmd-preview {

   /* 604 */

   width: 100%;    /* <<<<< THIS CHANGED  */

   margin: 10px 0;

   padding: 8px;

   border: 2px dashed #ccc;

}

 

 

Comments

after adding your code all button hide