第一步：导入前端js文件
<!-- 富文本编辑器 -->
<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>
第二步：html页面中添加富文本编辑器输入框
<div>kindeditor富文本编辑器</div>
<div>
<!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
<textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>
第三步：添加富文本编辑器绑定的js代码
<!-- 正文区域 /-->
<script type="text/javascript">
//定义一个全局变量
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
//此处是给编辑框赋予初始值
//editor.html("123");
}); </script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 富文本编辑器 -->
<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>
</head>
<body>
<div>测试内容</div>
<div>
<!--此处的name应与下方的editor=K.create('textarea[name="content"]')一致-->
<textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>
</body>
<!-- 正文区域 /-->
<script type="text/javascript">
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
allowFileManager: true
});
});
</script>
</html>