ASP.NET MVC中使用FCK 富文本篇辑器
asp.net
页面引用FCK JS 和jquery .js
View调用
@Html.FckText("Content2", Model.Content2)
后台扩展方法
public static MvcHtmlString FckText(this System.Web.Mvc.HtmlHelper helper, string name, string val, string width = "1500", string height = "400")
{
if (string.IsNullOrEmpty(name))
{
return MvcHtmlString.Create("name属性为必须");
}
int thm = DateTime.Now.Millisecond;
string html = @"
<script type=""text/javascript"">
$(function () {
var oFCKeditor2" +thm+ @" = new FCKeditor('" + name + @"');
//高度
oFCKeditor2" +thm+ @".Width = "+width+@";
//宽度
oFCKeditor2" +thm+ @".Height = "+height+@";
//初始化内容
oFCKeditor2" + thm + @".value = ""WRITE YOU MESSAGE HERE!"";
oFCKeditor2" + thm + @".ReplaceTextarea();
})
</script>
<textarea rows=""10"" cols=""20"" name="""+name+@""" id="""+name+@"""> "+val+@"</textarea>
";
return MvcHtmlString.Create(html);
}
FCK常用的JS方法
<script type="text/javascript">
function getEditorHTMLContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return (oEditor.GetXHTML(true));
}
//获取编辑器中文字内容 更多来自我论坛:http://www.52mvc.com/showtopic-1382.aspx
function getEditorTextContents(EditorName) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
return (oEditor.EditorDocument.body.innerText);
}
//设置编辑器中内容
function SetEditorContents(EditorName, ContentStr) {
var oEditor = FCKeditorAPI.GetInstance(EditorName);
oEditor.SetHTML(ContentStr);
}
</script>
原理
基本使用
1.首先登录官网下载文件包 如：FCKeditor_2.6.4.1.zip
2.解压后生成一个目录fckeditor将该目录拷贝到工程的根目录下
3.在页面中引用工具包，这里使用使用Javascript引用，还可以使用FCK的标签引用
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
4.定义一个文本编译域，并在窗体加载时加载事件：
<script type="text/javascript">
window.onload=function(){
var oFCKeditor = new FCKeditor( 'myData' ) ;
//编译器基本路径
oFCKeditor.BasePath = "/fckeditor/fckeditor/";
//高度 www.zzzyk.com
oFCKeditor.Width=600;
//宽度
oFCKeditor.Height=400;
//初始化内容
oFCKeditor.value="WRITE YOU MESSAGE HERE!";
oFCKeditor.ReplaceTextarea() ;
}
</script>
<textarea rows="10" cols="20" name="myData" id="myData">
</textarea>
补充：Web开发 , ASP.Net ,
