之前一直再用layui做后端的开发，用着一直很顺手，前段时间看layui好似不做了，而且现在vue已经算主流了(我还不觉得，呵呵)，但是系统性的学一遍vue也确实没时间，但是也大概的了解下，主要就是通过后台给的api，前端拿到这个数据通过vue等框架来渲染前端，就想到了layuiadmin，这个不也就是这个意思么可能没vue那么高端，但是我感觉思路是差不多的，因为之前用layui，这次用layuiadmin上手也还算可以，今天就说说我昨天遇到的坑!

layui，之前自己有个编辑器layedit，但是维护和开发编辑器的工作量太大，所以就不在维护这个组件了，那么做开发后台怎么能没有编辑器呢，那就说下怎么整合百度编辑器。

layuiadmin的需要放编辑器的模板，我们拿默认的模板来说，根目录下src/app/content/listform.html 这个页面是添加和编辑用的表单模板，一般我们就在这里创建编辑器

<textarea id="content">{{ d.params.content || ''}}</textarea>

这样我们先用textarea 给编辑器占位 这里用 script 或者 div 都可以

<script src="/static/ueditor/ueditor.config.js"></script>
<script src="/static/ueditor/ueditor.all.js"></script>
<script src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

然后在表单最下面 引入百度编辑器的js文件

按照正常的逻辑 下面我们就直接实例化这个编辑器就可以了，并且可以成功渲染出百度编辑器

但是在我测试的时候发现只要打开添加的弹窗控制台就报错Cannot read property 'offsetWidth' of null

然后。。然后。。。3小时后（这期间我换了各种第三方的编辑器，没有不报错的）

最后百度了一下（百度的产品还是得靠百度解决），说是这个百度编辑器还没加载完，就实例化了，所以就会报这个错误。

中间试了无数次，最后在相应的列表页模板页面 即：src/app/content/list.html 的默认代码里 添加文章的代码块中加载完弹窗，之后我们在实例化百度编辑器就可以了

//添加
,add: function(othis){
 admin.popup({
  title: '添加文章'
  ,area: ['800px', '620px']
  ,id: 'LAY-popup-arc-add'
  ,success: function(layero, index){
   view(this.id).render('app/content/arcform').done(function(){
    // 在这里实例化百度编辑器，或者其他编辑器都可以
    let ue = UE.getEditor('content');

还有2点需要注意

1：如果你的表单里有下拉框并且在编辑器的上方，那么默认你的编辑器肯定会挡住你的下拉框的下拉选项的，解决方法：

//在百度编辑器的实例化的参数里设置，百度编辑器默认的层级是900（我记得是）太高了

zIndex: 5,

2：还是层级的问题，正常引用不会出现这个问题但是放到layuiadmin里就会出现，比如在百度编辑器点击 多图上传，那么弹出的界面会在表单弹窗这个层级下面，解决办法：

// 还是层级的问题，但是layuiadmin他包含了 layer 他的层级肯定设置的非常详细和系统，我们最好不要该layuiadmin的层级关系（主要是找起来太麻烦）
// 那就修改百度编辑器的工具悬浮层的层级，方法如下 ueditor目录下 ueditor.all.js 大概27141行  版本不同位置可能不同

// 原来的代码

this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex * 1 + 10);

//要高过编辑器的zindxe 改成这样

this.editor.container.style.zIndex && (this.getDom().style.zIndex = 19892000);

// 因为layuiadmin默认弹窗层级太高，这里百度默认的层级计算方法就不行了就写死了
// this.editor.container.style.zIndex * 1 + 10
// 这样改完了所有工具的悬浮层就正常了