推荐富文本编辑器CKEditor 4,支持直接编辑HTML(inline editing)

由于项目需要,老版的文本编辑器需要更新,更新的主要原因是由于编辑抱怨编辑器不够合理、格式乱套等等。对于不懂HTML和CSS的他们,确实,如果随便弄一个市面上的文本编辑器,都够他们折腾半天的。所以,我决定找一个简单的能满足他们需要的编辑器。我找到了它《CKEditor 4》。之前我也曾经用过这个编辑器,当时没有太过于在意这个编辑器的优势。在简单试用了CKEditor 4版本之后,我才发现,它就是我想要找的。

CKEditor 4的优势:

1、界面简洁清爽,支持多语言。尤其是4版本引入的Moono,我本人是非常非常喜欢,看截图:

2、支持自动补全HTML,比如<p>它会自动补全</p>。

3、回车换行,不是用div,全部是用<p>这对于文字编辑来说是最最重要的,否则他们经常搞的到处都是div和span等等,这一点明显好于FCKeditor

4、它在新版本中支持 inline editing,你可以看官方的demo:http://ckeditor.com/demo#inline

这一点对于我来说非常重要,因为编辑需要发布专题,而专题就是一组固定的HTML框架中间填充内容,这个功能刚好适合我来做专题发布。

 

市面上的文本编辑器非常非常多,没有好与坏,找到一个适合自己的最重要!所以我就决定用它了。

最后补充一下,如果需要在CKEditor上支持图片上传,需要另外下载ckfinder并配置一下(请自己研究,一定要注意安全性),我这里就不赘述了,看看代码和截图吧。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>ckeditor demo</title>
    <script type="text/javascript" src="/seansfile/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="/seansfile/ckfinder/ckfinder.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtContents" runat="server" Height="400" TextMode="MultiLine" Width="95%"></asp:TextBox>
    <script type="text/javascript">
    var editor = CKEDITOR.replace( '<%=txtContents.ClientID %>' ,
                        {
                            height:320,width:'95%'
                        }
    );
    CKFinder.setupCKEditor(editor, '/seansfile/ckfinder');
    </script>
    </div>
    </form>
</body>
</html>
 
评论 (0) 分享 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址