ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能

tinymce 插件不提供免费的本地图片上传功能，所以自己将uploadify这个上传插件整合到tinymce，实现本地上传，还用到了jquery.ui插件，先展示全部的代码

@model TinyMCEUpload.Models.TinyMCEModels

<script type="text/javascript">

    $(document).ready(function () {

        var tinymceEditor;

        tinymce.init({

            selector: "textarea#content",

            auto_focus: "content",

            language: "zh_CN",

            theme: "modern",

            plugins: [

                "advlist autolink lists link image charmap preview",

                "searchreplace visualblocks fullscreen",

                "insertdatetime media table contextmenu paste",

                "emoticons textcolor"

            ],

            toolbar1: "undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",

            toolbar2: "fullscreen preview | forecolor backcolor emoticons | table | link image media | mybutton",

            setup: function (editor) {

                editor.addButton('mybutton', {

                    text: '上传图片',

                    icon: false,

                    onclick: function () {

                        tinymceEditor = editor;

                        $("#uploadofedit").dialog({

                            modal: true,

                            resizable: false,

                            width: ,

                            height: ,

                            dialogClass: "mceuploadify"

                        });

                    }

                });

            },

            //TinyMCE 会将所有的 font 元素转换成 span 元素

            convert_fonts_to_spans: true,

            //换行符会被转换成 br 元素

            convert_newlines_to_brs: false,

            //在换行处 TinyMCE 会用 BR 元素而不是插入段落

            force_br_newlines: false,

            //当返回或进入 Mozilla/Firefox 时，这个选项可以打开/关闭段落的建立

            force_p_newlines: false,

            //这个选项控制是否将换行符从输出的 HTML 中去除。选项默认打开，因为许多服务端系统将换行转换成 <br />，因为文本是在无格式的 textarea 中输入的。使用这个选项可以让所有内容在同一行。

            remove_linebreaks: false,

            //不能把这个设置去掉，不然图片路径会出错

            relative_urls: false,

            //不允许拖动大小

            resize: false,

            font_formats: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",

            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"

        });

        $("#tinymceuploadify").uploadify({

            'swf': '../../uploadify/uploadify.swf',

            'buttonText': '上传本地图片',

            'uploader': '/Home/Upload',

            'auto': true,

            'method': 'post',

            'multi': false,

            'onUploadSuccess': function (event, data, flag) {

                var img = "<img  src='../../File/" + data + "'>";

                tinymceEditor.insertContent(img);

                setTimeout(function () {

                    $("#uploadofedit").dialog('close');

                }, );

            },

            'onUploadError': function () {

                setTimeout(function () {

                    $("#uploadofedit").dialog('close');

                }, );

                alert("上传失败");

            }

        });

    });

</script>

<div>

    <form method="post" action="/Home/Test">

        <textarea id="content" name="content" style="width: 100%; height: 600px;"></textarea>

        <input type="submit" value="提交" />

    </form>

</div>

<div id='uploadofedit' style="display: none;">

    <input type='file' name='tinymceuploadify' id='tinymceuploadify' />

    <label>只能上传单张10M以下的 png、jpg、gif 格式的图片</label>

</div>

接下来分步骤来分析

1 先实现在tinymce插件上添加自定义按钮

toolbar2: " mybutton",

            setup: function (editor) {

                editor.addButton('mybutton', {

                    text: '上传图片',

                    icon: false,

                    onclick: function () {

                        });

                    }

                });

            },

2.初始化uploadify插件

$("#tinymceuploadify").uploadify({

            'swf': '../../uploadify/uploadify.swf',

            'buttonText': '上传本地图片',

            'uploader': '/Home/Upload',

            'auto': true,

            'method': 'post',

            'multi': false,

            'onUploadSuccess': function (event, data, flag) {

                var img = "<img  src='../../File/" + data + "'>";

                tinymceEditor.insertContent(img);

                setTimeout(function () {

                    $("#uploadofedit").dialog('close');

                }, );

            },

            'onUploadError': function () {

                setTimeout(function () {

                    $("#uploadofedit").dialog('close');

                }, );

                alert("上传失败");

            }

        });

3.在点击自定义按钮后启用jquery-ui的dialog插件调出上传对话框

setup: function (editor) {

                editor.addButton('mybutton', {

                    text: '上传图片',

                    icon: false,

                    onclick: function () {

                        tinymceEditor = editor;

                        $("#uploadofedit").dialog({

                            modal: true,

                            resizable: false,

                            width: ,

                            height: ,

                            dialogClass: "mceuploadify"

                        });

                    }

                });

            }

至此前台部分OK了，接下来是后台

1.后台接收用户上传的图片

[HttpPost]

        public ContentResult Upload(HttpPostedFileBase Filedata)

        {

            string result = string.Empty;

            string folder = Server.MapPath("~/File/");

            string time = DateTime.Now.ToString("yyyyMMddHHmmssff");//获取时间

            string extension = System.IO.Path.GetExtension(Filedata.FileName);//获取扩展名

            string newFileName = time + extension;//重组成新的文件名

            if (!System.IO.Directory.Exists(folder))

                System.IO.Directory.CreateDirectory(folder);

            Filedata.SaveAs(folder + "\\" + newFileName);

            return Content(newFileName);

        }

2.接收tinymce插件的内容（我这里简单的用记事本来替代数据库），然后再从记事本中把内容读出来呈现到另一个页面上

/// <summary>

        /// 接收tinymce插件的内容

        /// </summary>

        /// <param name="model"></param>

        /// <returns></returns>

        public ActionResult Test(TinyMCEModels model)

        {

            var path = Server.MapPath("~/File/123.txt");

            var str = System.IO.File.ReadAllText(path);

            if (System.IO.File.Exists(path))

            {

                System.IO.File.Delete(path);

            }

            System.IO.File.WriteAllText(path, model.content);

            return RedirectToAction("Show");

        }

        /// <summary>

        /// 将记事本的内容读出来，重新加载到页面上

        /// </summary>

        /// <returns></returns>

        public ActionResult Show()

        {

            var str = System.IO.File.ReadAllText(Server.MapPath("~/File/123.txt"));

            ViewBag.str = str.Trim();

            return View();

        }

因为在mvc4中为了防止脚本攻击，默认是不允许有html标记的内容传到后台的，所以我建立了一个TinyMCEModels，在content属性上加上AllowHtml标记（在System.Web.Mvc命名空间下），这样就行了

public class TinyMCEModels

    {

        [AllowHtml]

        public string content { get; set; }

    }

源码 http://files.cnblogs.com/guzhehang/TinyMCEUpload.rar

巴特西

ASP.NET MVC4实现TinyMCE 4.0.20自定义上传功能

最新文章

热门文章