首页  编辑  

Wang's Editor如何实现编辑区铺满整个窗口且工具栏不随滚动条滚动

Tags: /计算机文档/网页制作/   Date Created:

最新 V4.x/5.x版本

Wang's Editor是一个非常优秀的编辑器，十分简洁好用。缺点是编辑器的内容复制到其他地方后，因为采用的是CSS样式，而不是内联样式，会导致格式丢失部分。
如何让编辑器在div中，文本编辑区域铺满整个div，并且如果编辑器内容很多，只有编辑区域滚动，工具栏并不滚动呢？并且如果窗口缩放之后，工具栏自动换行，且文本编辑区域自动缩小铺满其余空间？

  1. <div style="border: 1px solid #ccc;position: absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;">
  2.     <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
  3.     <div id="editor-text-area" style="overflow: hidden;height:100%"></div>
  4. </div>
  6. <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
  7. <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
  8. <script>
  9.     const E = window.wangEditor
  10.     var file = null
  11.     E.i18nChangeLanguage(navigator.language) // 切换语言
  13.     window.editor = E.createEditor({
  14.         selector: '#editor-text-area',
  15.         html: '<p><br></p>',
  16.         config: {
  17.             placeholder: "Edit here",
  18.             MENU_CONF: {
  19.                 uploadImage: {
  20.                     fieldName: 'your-fileName',
  21.                     base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
  22.                 }
  23.             }
  24.         }
  25.     })
  26.     window.toolbar = E.createToolbar({
  27.       editor,
  28.       selector: '#editor-toolbar',
  29.       config: {}
  30.     })
  31. </script>
重点：
父节点必须设置 display:flext 和 flex-direction:column，其次editor-text-area的style必须设置为 overflow: hidden;height:100%

效果图：

老版本 3.x：


  1. <div id="editor" style="flex-grow:1;background-color:white;text-align:left;overflow-y:auto;display:flex;flex-direction:column;"></div>
  2. <script>
  3.  var E = window.wangEditor;
  4.  var editor = new E('#editor');
  5.  editor.create();
  6.  document.querySelector("#editor > div.w-e-text-container").style.height = "100%";
  7. </script>