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: 400,
                            height: 200,
                            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');
                }, 1000);
            },
            'onUploadError': function () {
                setTimeout(function () {
                    $("#uploadofedit").dialog('close');
                }, 1000);
                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>

View Code