富文本编辑器kindeditctor的使用

最新推荐文章于 2022-06-21 09:10:06 发布

喝粥也会胖的唐僧

最新推荐文章于 2022-06-21 09:10:06 发布

阅读量849

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhou_438/article/details/83957554

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.下载

官网最新是2016年更新的

但，4.1.11没有example

可以直接在国内的网站下载4.1.10

为什么需要example，因为example提供了很多自学的例子

2.使用

放在webapp下的目录即可

3.example的上手

1）auto-height.html

可以手动拖动高度

源码：

<html>
	<head>
		<meta charset="utf-8" />
		<title>Auto Height Examples</title>
		<style>
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}
		</style>
		<link rel="stylesheet" href="../themes/default/default.css" />
		<script charset="utf-8" src="../kindeditor-min.js"></script>
		<script charset="utf-8" src="../lang/zh_CN.js"></script>
		<script>
			KindEditor.ready(function(K) {
				K.create('textarea[name="content"]', {
					autoHeightMode : true,
					afterCreate : function() {
						this.loadPlugin('autoheight');
					}
				});
			});
		</script>
	</head>
	<body>
		<h3>自动调整高度</h3>
		<form>
			<textarea name="content" style="width:800px;height:200px;"></textarea>
		</form>
	</body>
</html>

上面代码的函数调用了this.loadPlugin('autoheight');所以加载插件'autoheight

'autoheight的源码：

KindEditor.plugin('autoheight', function(K) {
	var self = this;

	if (!self.autoHeightMode) {
		return;
	}

	var minHeight;

	function hideScroll() {
		var edit = self.edit;
		var body = edit.doc.body;
		edit.iframe[0].scroll = 'no';
		body.style.overflowY = 'hidden';
	}

	function resetHeight() {
		var edit = self.edit;
		var body = edit.doc.body;
		edit.iframe.height(minHeight);
		self.resize(null, Math.max((K.IE ? body.scrollHeight : body.offsetHeight) + 76, minHeight));
	}

	function init() {
		minHeight = K.removeUnit(self.height);

		self.edit.afterChange(resetHeight);
		hideScroll();
		resetHeight();
	}

	if (self.isCreated) {
		init();
	} else {
		self.afterCreate(init);
	}
});

2）colorpicker.html

源码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ColorPicker Examples</title>
		<link rel="stylesheet" href="../themes/default/default.css" />
		<script src="../kindeditor-min.js"></script>
		<script>
			KindEditor.ready(function(K) {
				var colorpicker;
				K('#colorpicker').bind('click', function(e) {
					e.stopPropagation();
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
						return;
					}
					var colorpickerPos = K('#colorpicker').pos();
					colorpicker = K.colorpicker({
						x : colorpickerPos.x,
						y : colorpickerPos.y + K('#colorpicker').height(),
						z : 19811214,
						selectedColor : 'default',
						noColor : '无颜色',
						click : function(color) {
							K('#color').val(color);
							colorpicker.remove();
							colorpicker = null;
						}
					});
				});
				K(document).click(function() {
					if (colorpicker) {
						colorpicker.remove();
						colorpicker = null;
					}
				});
			});
		</script>
	</head>
	<body>
		<input type="text" id="color" value="" /> <input type="button" id="colorpicker" value="打开取色器" />
	</body>
</html>

3）custom-plugin.html

剩下的插件就不贴了，太多了

喝粥也会胖的唐僧

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器kindeditctor的使用

1.下载官网最新是2016年更新的但，4.1.11没有example 可以直接在国内的网站下载4.1.10为什么需要example，因为example提供了很多自学的例子 2.使用放在webapp下的目录即可3.example的上手1）auto-height.html可以手动拖动高度源码：&lt;html&gt; &lt;...
复制链接

扫一扫