CODEWITHSUNDEEP
c#javascriptasp.net-mvcfile-uploadwmd
Nicolas Cadilhac
Nicolas Cadilhac

Reputation: 4745

Upload an image with wmd?

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.

Upvotes: 1

Views: 693

Answers (3)

Jordan Arsenault
Jordan Arsenault

Reputation: 7428

I wrote a blog post that explains how I solved this. In the post, I use PHP - if you're comfortable converting my PHP logic into ASP.NET, you may find it helpful!

Upvotes: 0

Chris S
Chris S

Reputation: 65466

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"></script>
    <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

Upvotes: 1

Aaron Maenpaa
Aaron Maenpaa

Reputation: 123030

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.

Upvotes: 1

Related Questions