用wmd上传图片？

发布于 2024-07-10 16:16:33 字数 133 浏览 14 评论 0原文

wmd编辑器是否可以添加一个按钮，让用户将图像上传到网络服务器，并将相应的img markdown放在文本框中？如果没有，另一个好的就地编辑器会做吗？背景：我正在使用 asp.net mvc、C#，并且我是 javascript 的真正初学者。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瞎闹 2024-07-17 16:16:33

简单浏览一下 WMD 似乎表明不直接支持此功能，并且不支持该控件特别是可插拔的。

话虽这么说，没有什么可以阻止您创建按钮/上传字段/任何将图像发送到服务器并注入适当的：

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

到控件的底层文本区域中。

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.

回复收藏 0 原文

鸢与 2024-07-17 16:16:33

这是 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>

但正如您可能知道的那样，这只是一个开始。这个 Markdown 编辑器看起来更好

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

回复收藏 0 原文