PHP开发网页中嵌入kindeditor编辑器

kindeditor是一个比较轻量的编辑器,下载地址 http://kindeditor.net/down.php

需要引入的几个文件

<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>

js

<script>
	KindEditor.ready(function(K) {
		window.editor = K.create('#editor_id');
	});
	var options = {
		cssPath : '/css/index.css',
		filterMode : true
	};
	var editor = K.create('textarea[name="content"]', options);
	// 取得HTML内容
	html = editor.html();

	// 同步数据后可以直接取得textarea的value
	editor.sync();
	html = document.getElementById('editor_id').value; // 原生API
	html = K('#editor_id').val(); // KindEditor Node API
	html = $('#editor_id').val(); // jQuery

	// 设置HTML内容
</script>

<script type="text/javascript">
KindEditor.ready(function (K) {
	var editor1 = K.create('textarea[name="article.content"]', {
		cssPath: 'Resources/kindeditor/plugins/code/prettify.css',
		resizeType: 1,
		allowPreviewEmoticons:false,
		allowImageUpload: true,
		allowFileManager: false,
		items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
				  'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
				  'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
		afterChange:function() {
			K('.word_input').html(this.count('text'));
			var input = this.count('text');
			var remain = 1500 - input;
			K('.word_remain').html(remain);
		}
	});
	prettyPrint();
});
</script>

HTML部分

<textarea id="editor_id" name="content" style="width:1200px;height:300px;"></textarea>

id名称必须是editor_id,而且是唯一的id名

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值