65.9K
CodeProject 正在变化。 阅读更多。
Home

在 ASP.NET 中集成 FCKeditor

Jahedur Rahman Chowdhury
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (13投票s)

2008年7月20日

CPOL

2分钟阅读

viewsIcon

272992

downloadIcon

10148

在 ASP.NET 中集成 FCKeditor

引言

在基础的 ASP.NET 中，FCKeditor 可以很容易地集成。 这里是链接，我是在那里找到的。

然而，要在 ASP.NET MVC 环境中集成 FCKeditor，我们需要遵循一些复杂的步骤。 在这里我将展示如何使用核心 JavaScript 以及使用 Jquery 进行集成。

使用 JavaScript

步骤 1

从 这里 下载 FCKeditor。

第二步

解压缩软件包并将其放入您的项目内容目录中。 我喜欢在 Content 目录下创建一个 Javascript 目录，并将解压缩后的 fckeditor 放在这里。 我还在 Javascript 文件夹中放置了 fckeditorapi.js。 您可以在 这里 获得有关 FCKeditor API 的更多信息。

步骤 3

我在 Home 文件夹中添加了一个 MVC 视图文件，并将其命名为 Fck.aspx。 为了查看此文件，我在 HomeController 中包含了一个方法，如下所示

/// <summary>
/// Show FCK Editor View Page
/// </summary>
public void Show()
{
    RenderView("Fck");
}

步骤 4

在 Fck.aspx 中，包含 fckeditor.js 和 fckeditorapi.js 文件

<script type="text/javascript" src="../../Content/Javascript/fckeditor/fckeditor.js">
</script>
<script type="text/javascript" src="../../Content/Javascript/fckeditorapi.js"></script>

包含以下内容以用 FCKeditor 替换 textarea（命名为 'content'）。 这里我包含了 InsertContent()、ShowContent() 和 ClearContent() 方法来执行一些额外的操作

<script type="text/javascript">
window.onload = function()
{
    var oFCKeditor = new FCKeditor( 'content' ) ;
    oFCKeditor.BasePath = "/Content/Javascript/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>

这是 HTML 内容

<div>
  <input id="sample" type="text" />
  <input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />

  <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>

步骤 5

现在构建应用程序并运行。 单击“FCK Editor”链接并获取结果。

使用 JQuery

步骤 1

从 这里 下载 jquery。 我将 jquery-1.2.6.pack.js 和 jquery.FCKEditor.js 放在我的 "Javascript" 文件夹中。

第二步

我在 Home 文件夹中添加了一个 MVC 视图文件，并将其命名为 "FckJquery.aspx"。 为了查看此文件，我在 HomeController 中包含了一个方法，如下所示

/// <summary>
/// Show FCK Editor By JQuery
/// </summary>
public void View()
{
    RenderView("FckJquery");
}

步骤 3

在 FckJquery.aspx 中，包含 jquery-1.2.6.pack.js、fckeditor.js 和 jquery.FCKEditor.js 文件

<script type="text/javascript" src="../../Content/Javascript/jquery-1.2.6.pack.js">
</script>
<script type="text/javascript" src="../../Content/Javascript/fckeditor/fckeditor.js">
</script>
<script type="text/javascript" src="../../Content/Javascript/jquery.FCKEditor.js">
</script>

包含以下内容以用 FCKeditor 替换 textarea（命名为 'content'）。 这里我包含了 InsertContent()、ShowContent() 和 ClearContent() 方法来执行一些额外的操作。

<script type="text/javascript">
$(document).ready(function(){
    $.fck.config = {path: '/Content/Javascript/fckeditor/', height: 300 };
    $('textarea#content').fck();
});

function InsertContent()
{
    var sample = document.getElementById("sample").value;
    $.fck.insertHtml('fck1', sample);
}

function ShowContent()
{
    alert($.fck.content('fck1', ''));
}

function ClearContent()
{
    $.fck.clearHtml('fck1');
}
</script>

这是 HTML 内容

<div>
  <input id="sample" type="text" />
  <input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />

  <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>

步骤 4

在 jquery.FCKEditor.js 文件中，我包含了两个函数。 函数 insertHtml() 将 HTML 内容插入到 fckeditor 中，而 clearHtml() 清除内容。

// insert Html Content
insertHtml: function(i, v) {
try{
var x = FCKeditorAPI.GetInstance(i);

if(v) x.InsertHtml(v);
else return '';
}
catch(e) { return ''; };
},

// clear Html Content
clearHtml: function(i) {
try{
var x = FCKeditorAPI.GetInstance(i);

x.SetHTML('');
}
catch(e) { return ''; };
},

步骤 5

现在构建应用程序并运行。 单击“FCK Editor By JQuery”链接并获取结果。 享受吧！

参考文献

结论

接下来，我将尝试演示如何在 FCKeditor 中构建插件。 在此之前，再见。

历史

  • 2008 年 7 月 20 日：初始发布
© . All rights reserved.