两种富文本编辑器-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文件进行编辑修改的。

两种富文本编辑器-ckeditor和ueditor

标签：

原文地址：http://www.cnblogs.com/zhuo1993/p/zhuo_desk.html