标签：文件 简单 初始化 KindEditor 编辑器 editor 使用 上传

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,编辑器,editor,使用,上传
来源： https://blog.csdn.net/BruceLiu_code/article/details/117024203

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。