需求

在一个比较窄的页面中使用 wangEditor 做富文本编辑

问题

需要使用wangEditor 所有菜单,但是其菜单栏很宽,会将伸出固定区域,菜单栏不能多行展示

查询解决方式

根据文档发现菜单栏和编辑区域可以分离,并且有源码,这个就比较好弄了,将菜单栏做成可拖动,编辑器垂直滚动就好了.将官方的分离代码考下来直接操作

效果示意

wangEditor.png

使用方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>wangEditor 菜单和编辑器区域分离</title>
    <style type="text/css">
      .outer {
        position: relative;
      }
      .toolbar {
        width: 768px;
        border: 1px solid #ccc;
        position: relative;
        z-index: 10001;
      }

      .text {
        z-index: 1;
        border: 1px solid #ccc;
        min-height: 400px;
      }

      .boxerl {
        position: relative;
        width: 400px;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 320px;
      }

      .boxerh {
        z-index: 120;
        top: 66px;
        position: absolute;
        width: 400px;
        height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .scollbar {
        width: 400px;
        overflow-x: auto;
      }

      .w-e-droplist {
        z-index: 10001;
      }

      .blankinner {
        width: 768px;
        height: 5px;
        border: 1px solid white;
      }
    </style>

    <script type="text/javascript">
      function dothis(elem) {
        var inner = document.getElementById("inner");
        inner.scrollLeft = elem.scrollLeft;
      }
    </script>
  </head>

  <body>
    <div class="outer">
      <div id="scoller" class="scollbar" onscroll="dothis(this)">
        <div class="blankinner"></div>
      </div>
      <div id="inner" class="boxerl">
        <!-- onblur="printa()" -->
        <div id="div1" class="toolbar"></div>
      </div>
     
      <div class="boxerh">
        <div id="div2" class="text">
  
          <p>请输入内容</p>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./wangEditor.min.js"></script>
    <script type="text/javascript">
      var E = window.wangEditor;
      var editor1 = new E("#div1", "#div2"); // 两个参数也可以传入 elem 对象，class 选择器
      editor1.create();
    </script>
  </body>
</html>