Upload image using wmd?
Is it possible if the wmd editor adds a button so that the user can upload the image to the webserver and put the appropriate img tag in the textbox accordingly? If not, will there be another good note editor? Context: I am using asp.net mvc, C # and I am getting started with javascript.
source to share
A short reading of WMD seems to indicate that this feature is not directly supported and that the control is not particularly wired.
That being said, nothing prevents you from creating the button / upload field / whatever sends the image to your servers and enters the appropriate:
<img src="http://your.server.com/path/to/attachments/..." />
The control that underlies the text box.
source to share
Here is a variation of 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 these are just beginnings that you can probably talk about. The editor for this label looks better
source to share
I wrote a blog post explaining how I solved this. I'm using PHP for this article - if you're comfortable with converting my PHP logic to ASP.NET, you might find it helpful!
source to share