KindEditor富文本编辑器

最新推荐文章于 2025-03-27 16:23:25 发布

原创最新推荐文章于 2025-03-27 16:23:25 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#富文本 #kindeditor

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

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

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('');  //清空富文本编辑器