求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
  
 
 
 
MVC环境下fckeditor的使用示例
 

2010-04-19 作者:邀月 来源:邀月工作室

 

最近项目中开始应用MVC框架,也遇到了一些问题,在此逐渐分享一些心得,以作交流。

第一个问题是fckeditor的应用,在网上搜索过的url有:

《 Integrating FCKeditor in ASP.NET》http://www.codeproject.com/KB/aspnet/fckeditor.aspx

也有dll添加的方式http://forums.asp.net/t/1312846.aspx

还有二十四画生的http://www.cnblogs.com/esshs/archive/2008/12/03/1346326.html#1548106

比较之后决定采用js控制的方式

步骤如下:(本例使用MVC1.0 Release!)

1、在 http://ckeditor.com/下载最新的Fckeditor V2.6(注意不是ckeditor3.0),下载后不含dll,直接整个目录解压到Content目录下

MVC项目目录结构下:

2、在HomeController.cs中添加actionResult:

    /// <summary>
        
/// Show FCK Editor View Page
        
/// </summary>
        public ActionResult Fck()
        {
            
//RenderView("Fck");
            ViewData["Title"] = "test Page";
            ViewData[
"Fck"] = Request.Form["Fck"];
            
return View();
        }

3、上述代码内部右键“Add View”--View Name默认为"Fck",点击"Add",则项目中\Views\Home\Fck.aspx文件自动新增。打开该文件,

在MainContent下替换默认内容为:

 <script type="text/javascript" src="http://www.cnblogs.com/Content/fckeditor/fckeditor.js"></script>
    
    
<script type="text/javascript">
        window.onload = 
function() {
            
var oFCKeditor = new FCKeditor('content');
            oFCKeditor.BasePath = "
/Content/fckeditor/";
            oFCKeditor.Height = 300;
            oFCKeditor.ReplaceTextarea();
        }

        
function InsertContent() {
            
var oEditor = FCKeditorAPI.GetInstance('content');
            
var sample = document.getElementById("sample").value;
            oEditor.InsertHtml(sample);
        }

        
function ShowContent() {
            
var oEditor = FCKeditorAPI.GetInstance('content');
            alert(oEditor.GetHTML());
        }

        
function ClearContent() {
            
var oEditor = FCKeditorAPI.GetInstance('content');
            oEditor.SetHTML("");
        }
    
</script>
    
    
<div>
        
<input id="sample" type="text" /> 
        
<input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />
        
&nbsp;
        
<input id="cmdClear" type="button" value="Clear Content" onclick="ClearContent()" />
        
<br /> <br />
        
<textarea id="content" cols="30" rows="10"></textarea>
        
<br />
        
<input id="cmdShow" type="button" value="Show Content" onclick="ShowContent()" />
    
</div>

注意,配置好js的路径。

4、展示fck,在\Views\Shared\Site.Master中添加如下内容:

<li> <%= Html.ActionLink("FCKDemo""Fck""Home")%> </li>

OK! 预览下效果吧!



如何向妻子解释OOD
OOAD与UML笔记
UML类图与类的关系详解
UML统一建模语言初学
总结一下领域模型的验证
基于 UML 的业务建模


面向对象的分析设计
基于UML的面向对象分析设计
UML + 嵌入式系统分析设计
关系数据库面向OOAD设计
业务建模与业务架构
使用用例进行需求管理


某航空IT部门 业务分析与业务建模
联想 业务需求分析与建模
北京航管科技 EA工具与架构设计
使用EA和UML进行嵌入式系统分析
全球最大的茶业集团 UML系统分析
华为 基于EA的嵌入式系统建模
水资源服务商 基于EA进行UML建模
更多...