【技术】kindeditor 4.1.11 工具栏浮动插件改进，可用于同时创建多个编辑器的环境下使用。

从 kindeditor 4.1.11开始， kindeditor 富文本编辑器增加了工具栏自动浮动插件：fixtoolbar，此插件在启用自动高度插件：autoheight后，当编辑器内容超过显示屏高度时，工具栏会自动跟随窗口浮动，大大方便了编辑内容的便捷性。

美中不足的是 kindeditor 4.1.11 自带插件只支持在创建单个编辑器的环境下使用，当同时创建多个编辑器时，除第一个编辑器的工具栏会自动浮动外，其他编辑器工具栏无法跟随窗口浮动。

最近有空研究了一下，因启动自动浮动插件后，自动浮动插件几乎成了必选项，此次修改将自动浮动插件：fixtoolbar 和自动高度插件：autoheight 合二为一，统一合并到自动高度插件JS文本：autoheight.js 中，调用方法参考如下：

KindEditor.ready(function(K) {
	var editor = K.create('textarea[name="自定义"]', {
		width:"1000px",	//自定义编辑器宽度
		autoHeightMode:true,	//启动自动高度、工具栏浮动插件
		items:['fontsize','forecolor','|','bold'……],	//自定义初始化参数
		afterCreate:function() {
			this.loadPlugin('autoheight');	//加载自动高度、工具栏浮动插件
			……	//自定义后续执行语句
		}
	});	
});

kindeditor编辑器目录\plugins\autoheight\autoheight.js更新如下：

/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
* @BEKDA 2018-10-30，可用于多编辑器工具栏浮动，http://www.bekda.com。
*******************************************************************************/

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 fixToolBar() {
		var ln=K('.ke-toolbar');	//工具栏筛选
		var lnPar=K('.ke-container');	//编辑器外框
		var ln_len=ln.length;	//工具栏数量
		var originW=ln.width()-10+'px';	//工具栏宽度	
        	K(window).bind('scroll', function () {	//卷轴事件函数
            		var scrollT = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var RealTime_H=[],RealTime_P=[],RealTime_Y=[];
            		for (var i=0; i<ln_len; i++) {
				RealTime_H[i]=lnPar.eq(i).height();	//实时高度
				RealTime_P[i]=lnPar.eq(i)[0].getBoundingClientRect().top;	//编辑器外框距窗口实时TOP
				RealTime_Y[i]=RealTime_P[i]+scrollT;	//编辑器外框距页面实时TOP
			}
			for (var i=0; i<ln_len; i++) {
				if (scrollT>RealTime_Y[i]+27 && scrollT<RealTime_Y[i]+RealTime_H[i]-108){	//设置浮动
					ln.eq(i).css('position', 'fixed');
				        ln.eq(i).css('top', '0px');
				        ln.eq(i).css('width', originW);
				        ln.eq(i).css('box-shadow', '0 0 10px #999');
				        ln.eq(i).css('index', '99999');
				} else {	//清除浮动
					ln.eq(i).css('position', 'relative');
				        ln.eq(i).css('top', 'auto');
				        ln.eq(i).css('box-shadow', 'none');
				}
			}
        	});
	}

	function init() {
		minHeight = K.removeUnit(self.height);
		self.edit.afterChange(function(){
			resetHeight();	//自动高度
			fixToolBar();	//工具栏浮动
		});
		hideScroll();	//隐藏卷轴
	}

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

* 注意事项：

1、此插件只适用于多个编辑器纵向排列时的工具栏浮动，如果一行中有两个或以上编辑需要根据聚焦进行浮动时不适用。

2、此插件同时包含自动高度插件及工具栏浮动插件，初始化时只需设置：autoHeightMode:true 并在 afterCreate 后加载插件即可。

以下推文采用自研智能关联、组合专题技术…：

---

相关文章 延伸阅读

• 不可不知的 5 种 JavaScript 代码编辑器
• HTML5 Geolocation 浏览器获取地理位置