菜单和编辑区域分离

如果你想要像 知乎专栏、简书、石墨、网易云笔记 这些编辑页面一样,将编辑区域和菜单分离,也可以实现。

这样,菜单和编辑器区域就是使用者可自己控制的元素,可自定义样式。例如:将菜单fixed、编辑器区域高度自动增加等。

<head>
    <style>
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            min-height: 400px;
        }
    </style>
</head>
<body>
    <p>
        container 和 toolbar 分开
    </p>
    <div>
        <div id="toolbar-container" class="toolbar"></div>
        <p>------ 我是分割线 ------</p>
        <div id="text-container" class="text"></div>
    </div>

    <!-- 引入 wangEditor.min.js -->
    <script>
        const E = window.wangEditor
        const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
        editor.create()
    </script>
</body>

从上面代码可以看出,菜单和编辑区域其实就是两个单独的 <div>,位置、尺寸都可以随便定义。

Copyright © wangEditor (2020 - present) all right reserved,powered by GitbookFile Modify: 2022-04-11 07:03:47

results matching ""

    No results matching ""