KindEditor的简单使用「建议收藏」-kindeditor编辑器

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

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>

是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！

为防止网络爬虫，请关注公众号回复”口令”

激活idea 激活CLion DataGrip DataSpell dotCover dotMemory dotTrace GoLand PhpStorm PyCharm ReSharper ReShaC++ Rider RubyMine WebStorm 全家桶 解锁下载刷新

【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】：官方授权 正版激活 自己使用，支持Jetbrains家族下所有IDE…

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",//指定上传文件请求的urluploadJson : '/uploadimg_kindeditor',  //上传后台地址,这个文件上传的地址需要自定义修改！！！//上传类型，分别为image、flash、media、filedir : "image",            //否允许浏览服务器已上传文件,默认是false            allowFileManager: true        });    });</script>// html 页面 ：为普通的textarea指定name属性即可（和js中一致）！<p >   <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea></p>

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

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