CKEditor在mvc3.0的应用 及扩展 封装
2012-08-07 11:58
211 查看
现在主要记录我负责这块的流程,有相应需求的可以联系我。
1.先从官网上下载CKEditor和CKFinder.http://ckeditor.com/download 我个人下载的是ckeditor_aspnet_3.6.2 版本的。网站也可能有更新。
2.将此控件应用到mvc上只需要:
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文件。
在plugin文件中添加一个文件夹FileUpload,写一个plugin.js,一个dialog文件夹,文件FilesUpload.js。 plugin.js:
FilesUpload.js:
这些步骤完成后,页面引用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; }
加上特性就可以了。
以上就是最终内容。
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 id="content" 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" style="width:600px;height:400px;" id="iframe1" name="iframe1"></iframe></div>'}] }], 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; }
加上特性就可以了。
以上就是最终内容。
相关文章推荐
- TextBoxFor控件的扩展---Bootstrap在mvc上的应用
- Log4Net异常日志记录在asp.net mvc3.0的应用
- 深入浅出Zabbix 3.0 -- 第十六章 第三方应用扩展
- asp.net mvc 3.0详细笔记__09__创建数据库,应用EF连接模型类和数据表
- mvc 封装4 composer 安装 扩展了类库
- MVC采用HtmlHelper扩展和Filter封装验证码的功能
- Xcode 5.0 下载,安装,使用 & iOS开发 -应用管理使用 xib及mvc封装
- MVC扩展ModelBinder,通过继承DefaultModelBinder把表单数据封装成类作为action参数
- 第二话 Asp.Net MVC 3.0【动态输出和Model(模型)应用】
- ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展
- C#扩展方法应用之 try catch finally 封装
- CKEditor3.0-4.0 js版编辑器,调用取值赋值等基本应用
- 在MVC中My97date应用C#扩展方法
- Android 插件扩展系列之 -- 封装与应用
- ASP.NET MVC3.0+ JqGrid+Unit Of Work+ Repository/ EF 4.1 CRUD应用 (多层结构)
- Unity 在MVC上的应用(扩展篇:JQuery AJAX)
- Spring+SpringMVC+Mybatis(SSM)框架搭建教程(五)-扩展:过滤器Filter应用
- Unity 在MVC上的应用(扩展篇:JQuery AJAX)
- Log4Net异常日志记录在asp.net mvc3.0的应用
- Log4Net异常日志记录在asp.net mvc3.0的应用