KindEditor的简单使用

Posted 2021-07-07 熊猫IT学院

1.KindEditor 简介

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

官网: http://kindeditor.net/about.php

其他常用的富文本编辑器:

UEditor http://ueditor.baidu.com/website/

CKEditor http://ckeditor.com/

有兴趣的小伙伴可以找时间探索一下哦!

2.第一步:导入KindEditor文件

从官网下载好文档之后，将相关文件导入到我们的项目中，如下图；并在需要富文本编辑框的页面中引入相应的文件。

<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>

3.第二步：初始化KindEditor编辑器

在页面添加javaScript代码初始化KindEditor编辑器，并在页面富文本编辑处指定name属性完成初始化！

//初始化KindEditor编辑器
<script type="text/javascript">
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('textarea[name="content"]', {
            //指定上传文件参数名称等同于<input name="file">属性
			filePostName  : "file",
			//指定上传文件请求的url
			uploadJson : '/uploadimg_kindeditor',  //上传后台地址,这个文件上传的地址需要自定义修改！！！
			//上传类型，分别为image、flash、media、file
			dir : "image",
            //否允许浏览服务器已上传文件,默认是false
            allowFileManager: true
        });
    });
</script>

// html 页面 ：为普通的textarea指定name属性即可（和js中一致）！
<div class="col-md-10 data editer">
   <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>

4.第三步：提取KindEditor编辑器中的内容

//提取编辑器内容
var content = =editor.html();

//清空编辑器内容
editor.html('');