kindeditor富文本编辑器使用

1.准备工作

官网地址: http://kindeditor.net/down.php

先去官方下载相应资源包放入工程webapp目录下

1.初始化

在页面中添加JS代码,用于初始化kindeditor

<!-- 富文本编辑器 这里路径大家存放位置不同有所差异  这里是webapp/plugins-->
    <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>

<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {  
			allowFileManager : true  //是否允许浏览服务器已上传文件
		});
	});
</script>

注意:K.create中的name="content"是对应前端相应的代码,我这里为

<div class="col-md-10 data editer">
    <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>

这样启动页面就能看到效果了

在这里插入图片描述

2.更多用法

添加起来还是比较简单的,啊哈哈

大家可以根据自己的需求去添加更多的功能或者选择不同样式,

可以参考官方说明:
http://kindeditor.net/doc.php

猜你喜欢

转载自blog.csdn.net/ouzhuangzhuang/article/details/82866001