本人所属施工单位，在建项目较多，通讯录是以项目为单位挂接在公司内部网站通讯录板块，以静态页面展示。一直以来都是项目部办公室通过电话、邮件等方式通知总部信息部门变更通讯录，日常维护的工作量较大。最近受领导委托设计一款能让项目部自助维护通讯录的软件，一二级部门标题要加以区分，要方便排序，方便维护，还要统一风格显示。
↑公司现有通讯录效果展示
第一种方案是后台挂接Excel表格，前台展示，这种显示效果一般，不符合要求。
↑Excel通讯录效果展示
第二种方案是后台单条录入，前台用表格（XXGrid,Repeater）展示，这种维护方便，但是不太方便排版。
↑第三方表格通讯录效果展示
第三种方案是后台编辑HTML表格，前台使用css样式调整显示风格。这种方案符合预期，但是让非技术人员编辑HTML表格，而且要统一风格，难度有点大。于是构思怎样简化用户操作，想到了用在线编辑器固定Table样式，然后通过自定义按钮实现简单的文字调整。
↑预期效果展示
其实技术实现并不难，主要是细节问题处理和调试工作繁琐，本人花费两天时间研究并实现了这个功能，下面详细展开说一下。
我这里使用的是KindEditor，最新版可以到官网下载。
首先新建一个空白页面，引用以下脚本文件：
<script src="http://www.likecs.com/Script/jquery-1.8.2.min.js"></script> <script src="http://www.likecs.com/Script/kindeditor/kindeditor-all-min.js"></script> <script src="http://www.likecs.com/Script/kindeditor/lang/zh-CN.js"></script>