tinyMce上传图片

tinyMce上传图片

标签（空格分隔）： js

tinyMce官方上传图片插件是让用户输入图片url的形式插入编辑器，很不方便，于是去网上找一下具有本地上传图片功能的插件。在github上搜了一下，找到了这个插件，配合着用C#写了个后端代码，调试可用。现将前后端源码贴出来供大家参考。

首先去https://github.com/boxuk/tinymce-imageupload 把这个插件下载并解压到 tinymce的plugin目录下，同时在页面里添加 jquery.iframe-post-form.js的引用,下载地址:https://github.com/worldspawn/jquery.iframe-post-form

html

<html>
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="tinymce/js/jquery.iframe-post-form.js"></script>
        <script>
                tinymce.init({
                    selector: '.richEditor',
                    imageupload_url: '/uploadImage.ashx', // ( server side script)
                    width: 820,
                    height: 200,
                    plugins: [
                        'advlist autolink lists link  hr imageupload',
                        'visualblocks visualchars code',
                        'textcolor colorpicker textpattern '
                    ],
                    toolbar: 'styleselect | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link  | imageupload',
                });
            })
        </script>
    </head>
    <body>
        <br/>
        <textarea id='Selector'  class="richEditor" name="rich">富文本1</textarea>
    </body>
</html>

后端代码

public class uploadImage : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        var path = GetBinaryData();
        context.Response.Write("{\"error\":false,\"path\":\""+path+"\" }");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

    public string GetBinaryData()
    {
        string imgFile = "/uploader/"+DateTime.Now.ToString("yyyyMMddhhmmss") + ".jpg";
        string filePath = HttpContext.Current.Server.MapPath(imgFile);
        Stream infiles = HttpContext.Current.Request.Files["file"].InputStream;
        int lang = (int)infiles.Length;
        byte[] bytes =new BinaryReader(infiles).ReadBytes(lang);
        string content = System.Text.Encoding.UTF8.GetString(bytes);
        FileStream fStream = new FileStream(filePath, FileMode.Create, FileAccess.Write);
        BinaryWriter bw = new BinaryWriter(fStream);
        bw.Write(bytes);
        bw.Close();
        fStream.Close();
        return imgFile;
    }

}

引用
https://github.com/boxuk/tinymce-imageupload

posted on 2016-09-21 13:43  chevsea  阅读(1232)  评论(0)    收藏  举报

导航