问题描述

editormd (一个 MARKDOWN 编辑器)和 layui (一个前端 html 框架)在进行混合开发时，遇到编辑代码块时无法选择代码语言的情况，弹出的“添加代码块”窗口不显示“代码语言”列表，如下图所示：

直接用 editormd 的示例页面打开，能正常显示“代码语言”下拉列表，正常的代码选择框如下图：

怀疑是 layui 的某些 css 样式影响了 editormd 的功能，使用时是将 editormd 嵌套在了 layui 的 form 样式中，代码如下：

代码修改前：

<form class="layui-form layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">tab1</li>
      <li>tab2</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div id="markdown-editor">
          <textarea style="display:none;">
          </textarea>
        </div>
      </div>
      <div class="layui-tab-item">
      </div>
    </div>
  </form>

经过实验，是由于 layui 的 layui-form 样式造成的，调整 editormd 控件的位置，将它放在 layui-form 样式外面，代码语言选择框能正常显示下拉列表。

代码修改后：

<div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">tab1</li>
      <li>tab2</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div id="markdown-editor">
          <textarea style="display:none;">
          </textarea>
        </div>
      </div>
      <form class="layui-form layui-tab-item">
      </form>
    </div>
  </div>

总结

editormd 是一个功能强大的 MARKDOWN 编辑器，可实时把 MARKDOWN 格式的文档转成 HTML，在使用时如果遇到 editormd 控件的某些功能无法使用、格式显示异常等问题，可能是由于把 editormd 的控件放在了其他样式里，导致样式不兼容，最好的解决方法就是将editormd 控件单独拿出来，不要和其他第三方控件或框架嵌套使用。