CKEditor富文本编辑器在asp.net mvc3.0的应用及其插件开发+上传

现在主要记录我负责这块的流程，有相应需求的可以联系我。

1.先从官网上下载CKEditor和CKFinder.http://ckeditor.com/download 我个人下载的是ckeditor_aspnet_3.6.2 版本的。网站也可能有更新。

2.将此控件应用到mvc上只需要：

<script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script type="javascript">CKEDITOR.replace('content');</script>
<textarea  name="content"></textarea>

ckeditor也就是把textarea包装一个样式。在ckeditor.js中toolbar有定义。config.toolbar_Full 和config.toolbar_Basic 分别代表了不同的toolbar。可以随意编辑。

完成上述步骤其实就可以用了。如果用简单版的就把js换成CKEDITOR.replace('content','Basic').CKFind也很好用，直接饮用进去就可以了。在toolbar上的上传图片那里可以看到效果。

3.扩展CKEditor的插件，因为需要做一个带有权限的上传所以就没有用到CKFind，而是扩展了一个上传方法。先说怎么在CKEditor中添加一个toolbar中的按钮。

一般在plugins文件夹中写扩展方法。扩展的FilesUpload

config.js 是用来配置的js文件。

CKEDITOR.editorConfig = function (config) {     config.toolbar = 'Full';     config.toolbar_Full =         [['Source', '-', 'Preview', '-', 'Templates'],          ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],          ['Undo', 'Redo', '-','FilesUpload', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],          ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],         '/',         ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],          ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],          ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],          ['Link', 'Unlink', 'Anchor'],          ['Image', 'Flash','FilesUpload', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],          '/',          ['Styles', 'Format', 'Font', 'FontSize'],          ['TextColor', 'BGColor'],          ['Maximize', 'ShowBlocks', '-', 'About']];     config.extraPlugins = 'FilesUpload';

}

在plugin文件中添加一个文件夹FileUpload，写一个plugin.js,一个dialog文件夹，文件FilesUpload.js。

plugin.js:

CKEDITOR.plugins.add('FilesUpload', 
{
    init: function(editor)    
    {        
        var pluginName = 'FilesUpload';        
        CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/FilesUpload.js');        
        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));        
        editor.ui.addButton('FilesUpload',
        {               
            label: '选择浏览文件',
            command: pluginName,
            icon: this.path + 'fileuploadimg.gif'
        });
    }
});

FilesUpload.js:

CKEDITOR.dialog.add('FilesUpload', function (a) {
    return { title: CKEDITOR.env.ie ? "上传文件" : "选择浏览上传文件",
        minWidth: 600,
        minHeight: 400,
        contents: [{ id: 'txtGenTitle',
            label: '',
            title: '',
            expand: true,
            padding: 0,
            elements: [{ type: 'html', style: 'width: 100%;height:100%;', html: '<style type="text/css">.ckeditorfilediv{width:600px;height:400px;}</style><div class="ckeditorfilediv"><iframe src="/FileUpload/selFile.aspx"  >}]
        }],
        onOk: function () {
            var frame1 = document.getElementById("iframe1");
            var linkname = frame1.contentWindow.document.getElementById("txtCaption").value;
            a.insertHtml("<img alt='' src='" + linkname + "'/>");
        },
        onLoad: function () { }
    };
});

这些步骤完成后，页面引用config.js。就完成了toolbar上有一个图片按钮，点击图片按钮弹出框包含一个aspx页面。这样就完成了。

我做的功能是可以上传到服务器，并且选中图片后，点确定能插入到编辑器中。onOK事件就是做的插入事情。

*-----------------但是还有一个问题：ckEditor怎么做可以像@html.Editor("da")这样展现在mvc呢。这样好引用，js也不用每个页面用的时候就写上了---------------------*

所以下一步封装ckeditor 所以从网上找了大量的资料发现了CKEditorHelpers.cs，当成扩展方法就行了。可以在http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx 下载。

当然此方法也可能有不适合的地方，自己进行改动就可以了。

需要做成partial页面引用。页面代码：@Html.CKEditor(ViewData.TemplateInfo.GetFullHtmlFieldName(""))

在viewmodel 类中就直接可以

[DisplayName("内容"), AllowHtml,UIHint("CKEditor")]

public string Content { get; set; }

加上特性就可以了。

以上就是最终内容。