KindEditor富文本编辑器_kindeditor 富文本编辑器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15764943/article/details/85018506

本文介绍KindEditor，一款开源的HTML可视化编辑器，用于实现网页上的所见即所得编辑体验。文章详细展示了如何引入KindEditor的JS文件，并通过一个简单的实例演示了如何在网页中配置和使用该编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

KindEditor简单使用

KindEditor
引入相关JS
简单使用

KindEditor

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，与此类似技术如：UEditor、CKEditor等
http://kindeditor.net/demo.php

引入相关JS

<link href="../js/kindeditor-4.1.11/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/kindeditor-4.1.11/kindeditor-all-min.js"></script>
<script type="text/javascript" src="../js/kindeditor-4.1.11/lang/zh_CN.js"></script>

JS收集下载地址：https://pan.baidu.com/s/17H7eP9SUd7QT0omCyvu0cA 提取码：7yac

简单使用

（1）html

<textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>

（2）JavaScript

var PR = {
	// 编辑器参数
	kingEditorParams : {
		//指定上传文件参数名称
		filePostName  : "uploadFile",
		//指定上传文件请求的url。
		uploadJson : '/pic/upload',
		//上传类型，分别为image、flash、media、file
		dir : "image"
	}
}
var itemAddEditor = KindEditor.create("#itemAddForm [name=desc]", PR.kingEditorParams);

itemAddEditor.sync();  //同步文本框中的商品描述
itemAddEditor.html('');  //清空富文本编辑器