自定义布局

默认情况下，AiEditor 在初始化的时候，会创建编辑器的头部菜单、编辑区域以及底部的字数显示区域。如下图所示：

默认示例

以上截图的初始化代码如下：

html

<!doctype html>
<html lang="en">
<head>
    <title>AiEditor Demo</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="aieditor/style.css">
    <script type="module">
        import {AiEditor} from 'aieditor/index.js'
        new AiEditor({
            element: "#aiEditor",
            placeholder: "点击输入内容...",
            content: 'AiEditor 是一个面向 AI 的下一代富文本编辑器。',
        })
    </script>
</head>
<body>

<div id="aiEditor" style="height: 550px;  margin: 20px"></div>

</body>
</html>

自定义布局

在某些场景下，我们想自定义整个 UI 布局，比如：类腾讯文档风格（演示地址： http://doc.aieditor.com.cn ），又或者其他自定义布局形式。我们可以通过 AiEditor 自定义的 UI 来实现。

示例代码如下：

html

<!doctype html>
<html lang="en">
<head>
    <title>AiEditor Demo</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="aieditor/style.css">
    <script type="module">
        import {AiEditor} from 'aieditor/index.js'
        new AiEditor({
            element: "#aiEditor",
            placeholder: "点击输入内容...",
            content: 'AiEditor 是一个面向 AI 的下一代富文本编辑器。',
        })
    </script>
</head>
<body>

<div id="aiEditor" style="height: 550px;  margin: 20px">
    <div class="aie-container">
        <div class="aie-container-header"></div>
        <div class="aie-container-main"></div>
        <div class="aie-container-footer"></div>
    </div>
</div>

</body>
</html>

在以上的代码中，相比默认代码，多出了一个类名为 aie-container 的 div 及其 3 个子 div，子 div 的作用如下：

aie-container-header 用于填充头部的菜单内容
aie-container-main 用于填充中间编辑区域
aie-container-footer 用于填充底部内容

这 3 个子 div 的顺序、位置、结构、包裹深度等可以进行任何的改变以及布局。但是他们都必须被包裹在类名 aie-container 的 div 中。这样，我们就可以实现了自己想要的任何布局。

自定义布局 ​

默认示例 ​

自定义布局 ​

自定义布局

默认示例

自定义布局