views:

327

answers:

2

Is it possible with the wmd editor to add a button to let the user upload an image to the web server and place the corresponding img markdown in the textbox? If not, will another good inplace editor do it? Context: I'm using asp.net mvc, C# and I am a true beginner with javascript.

+1  A: 

A brief perusal of the WMD seems to indicate that this feature is not supported directly and that the control is not particularly pluggable.

That being said, there's nothing stopping you from creating a button/upload-field/whatever that sends an image to your servers and injects the appropriate:

<img src="http://your.server.com/path/to/attachments/..." />

Into the control's underlying textarea.

Aaron Maenpaa
+1  A: 

Here's a variation to the minimal example that comes with WMD:

    <!DOCTYPE html>
<html>
  <head>
    <title>WMD minimal example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
    $.fn.insertAtCaret = function (myValue) {
            return this.each(function(){
                    //IE support
                    if (document.selection) {
                            this.focus();
                            sel = document.selection.createRange();
                            sel.text = myValue;
                            this.focus();
                    }
                    //MOZILLA/NETSCAPE support
                    else if (this.selectionStart || this.selectionStart == '0') {
                            var startPos = this.selectionStart;
                            var endPos = this.selectionEnd;
                            var scrollTop = this.scrollTop;
                            this.value = this.value.substring(0, startPos)
                                          + myValue
                                  + this.value.substring(endPos,
    this.value.length);
                            this.focus();
                            this.selectionStart = startPos + myValue.length;
                            this.selectionEnd = startPos + myValue.length;
                            this.scrollTop = scrollTop;
                    } else {
                            this.value += myValue;
                            this.focus();
                    }
            });

    };

    int i = 50;

    function Add()
    {
     $("#myTextarea").insertAtCaret("![alt text][" +(i++)+"]");
     // You'll need to add the link too, at the bottom
    }
    </script>
  </head>
  <body>

    <form>
    <a href="javascript:Add()">test</a>
        <textarea id="myTextarea" style="width: 500px; height: 200px;">*This* is a minimal example.</textarea>
    </form>
    <div class="wmd-preview"></div>

    <script type="text/javascript" src="wmd/wmd.js"></script>
  </body>
</html>

But it's only the beginnings as you can probably tell. This markdown editor looks better

Chris S