KindEditor的简单使用

Posted 熊猫IT学院

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了KindEditor的简单使用相关的知识,希望对你有一定的参考价值。

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('');

以上是关于KindEditor的简单使用的主要内容,如果未能解决你的问题,请参考以下文章

KindEditor - 代码高亮

KindEditor的简单使用,以及上传图片预览图片,用户删除图片后的数据处理(重点)

KindEditor解决上传视频不能在手机端显示的问题

KindEditor的使用和上传图片的后台处理

Kindeditor 编辑代码过滤

开启KindEditor代码高亮功能