YangTao
厌浅尝辄止喜有始有终
E.t's Blog
kindeditor富文本的运用
kindeditor富文本的运用

近期,关注了比较不错的几款富文本编辑器,包括百度UEditor,或UMeditor,当然这两款编辑器就不在做太多详细介绍,可以说UM是UE的迷你版,但这两款开源的都已经停更很久了,再次就不做太多的介绍了,果断抛弃,再次我们采用 kindeditor。

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

 

         KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。 KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用,2006年7月首次发布2.0以来,KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率,目前在国内已经成为最受欢迎的编辑器之一。

        首先,我们一睹风采,看看这个编辑器的样式是如何的:

https://www.aiphp.cn/wp-content/uploads/2018/08/js.png

这款富文本编辑器强大,而且可单独调用组件,例如,(Node操作)(上传按钮) (弹出框)(取色器)(浏览服务器) (上传图片弹出框)(批量上传弹出框)(上传文件弹出框) …….等

下载之后,部署(这里采用jsp),首先引入kindeditor的包(js,css文件),可根据默认的测试页面自行学习,引入之后

 

<link rel="stylesheet" href="../themes/default/default.css" />
	<link rel="stylesheet" href="../plugins/code/prettify.css" />
	<script charset="utf-8" src="../kindeditor-all.js"></script>
	<script charset="utf-8" src="../lang/zh-CN.js"></script>
	<script charset="utf-8" src="../plugins/code/prettify.js"></script>
	<script>
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[name="content1"]', {
				cssPath : '../plugins/code/prettify.css',
				uploadJson : '../jsp/upload_json.jsp',
				fileManagerJson : '../jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
				}
			});
			prettyPrint();
		});
	</script>

 

 

 

没有标签
首页      web      kindeditor富文本的运用
https://secure.gravatar.com/avatar/77f815bec37eb34e2eef92ae146f899a?s=256&d=mm&r=g

et

文章作者

发表评论

textsms
account_circle
email

E.t's Blog

kindeditor富文本的运用
近期,关注了比较不错的几款富文本编辑器,包括百度UEditor,或UMeditor,当然这两款编辑器就不在做太多详细介绍,可以说UM是UE的迷你版,但这两款开源的都已经停更很久了,再次就不做太多的介…
扫描二维码继续阅读
2018-08-13