两种富文本编辑器-ckeditor和ueditor
本文的使用环境是ASP.NET MVC4;
一、cheditor的使用方法:
第1步,在Scripts文件夹下新建一文件夹,在文件夹中添加cheditor使用包的如下文件:
第2步,在模板中添加引用:
<script src="~/Scripts/ckeditor/ckeditor.js"></script>
第3步,对要用富文本的textarea元素进行以下编辑:
<div> @Html.TextAreaFor(model => model.Description, new {@id="Description" }) </div> <script> var description = document.getElementById("Description"); CKEDITOR.replace(description); </script>
这样,ckeditor使用完成.
二、ueditor的使用
第1步,同样添加一个文件夹,如下所示:
第2步,添加引用:
<script src="~/ueditor/ueditor.all.js"></script>
<script src="~/ueditor/ueditor.config.js"></script>
<link href="~/ueditor/themes/default/css/ueditor.css" rel="stylesheet" />
第3步,在要用ueditor的地方以如下方式使用:
<form action="server.php" method="post"> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> @Model.Description </script> </form> <script type="text/javascript"> var editor = UE.getEditor('container'); </script>
效果如下:
同时要显示的快功能是可以通过对config,js文件进行编辑修改的。