文章目录
  1. 1. KindEditor 是什么?(引自官网)
  2. 2. 如何集成

KindEditor 是什么?(引自官网)

KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,
开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 
KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,
比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

简单说来,KindEditor就是一款集成式富文本编辑器,可以实现所见即所得的编辑效果。

也就是说,输入什么格式,经过持久化再显示出来还是什么格式。数据库中存储的是带格式的文本。

如何集成

logo

1.下载工具包http://kindeditor.net/down.php

2.解压之后将其中的js文件夹中所有内容、css、themes所有内容导入到工程中

3.其中,lang及plugins放到js文件夹下,themes放到css下。便于集中管理

4.建立一个页面,在header中引入主题文件及js文件及语言编码文件

<link rel="stylesheet" href="css/themes/default/default.css" />
<script charset="utf-8" src="js/kindeditor-min.js"></script>
<script charset="utf-8" src="js/lang/zh_CN.js"></script>

5.新建一个editor对象并添加name属性,设置其大小等属性

<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="blogContent"]', {
            allowFileManager : true,
            resizeType : 1,
            width:"100%",
            height:"250px"

        });
    });
</script>

6.在body中添加一个textarea节点

<textarea name="blogContent" id="blogContent" style="width:150px;height:230px;visibility:hidden;" 
placeholder="在此输入微博正文" class="form-control "></textarea>

预览如图
logo

文章目录
  1. 1. KindEditor 是什么?(引自官网)
  2. 2. 如何集成
Fork me on GitHub