不是第一
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<link href="wedt/wedtstyle.css" rel="stylesheet">
<!-- <script src="wedt/wangEditor.min.js"></script> -->
<script src="./wedt/weditindex.js"></script>
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100;
        /* 按需定义 */
    }

    #toolbar-container {
        border-bottom: 1px solid #ccc;
    }

    #editor-container {
        height: 100%;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        top: 0;
    }

    #app {

        width: 100%;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
        top: 0;
        background-color: #ededed;

        display: grid;
        grid-template-columns: 20% 60% 20%;
        grid-template-rows: 20% 60% 20%;
    }
</style>

<body>
    <div id="app">

        <div class="ctx">1</div>
        <div class="ctx">2</div>
        <div class="ctx">3</div>
        <div class="ctx">4</div>
        <div class="ctx" style="overflow:scroll;">

            <div id="editor—wrapper">
                <div id="toolbar-container"> </div>
                <div id="editor-container"> </div>
            </div>
        </div>
        <div class="ctx">6</div>
        <div class="ctx">7</div>
        <div class="ctx">8</div>
        <div class="ctx">9</div>
    </div>
</body>
<!--  <div id="editor—wrapper">
        <div id="toolbar-container"><!- - 工具栏 -- ></div>
        <div id="editor-container"><! -- 编辑器 - -></div>
    </div>-->



<script>
    const {
        createEditor,
        createToolbar
    } = window.wangEditor

    const editorConfig = {
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
            // 也可以同步到 <textarea>
        }
    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple'
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })
</script>

</html>

内容处理

#open in new window获取内容

#open in new window获取 HTML 和 Text

使用 editor.getHtml() 获取 HTML 内容， 使用 editor.getText() 获取纯文本内容。

推荐使用 HTML 格式存储数据。

#open in new window获取 JSON

使用 editor.children 获取 JSON 内容。

JSON 格式可以转换为 HTML 和 Text 格式，支持浏览器和 nodejs 。 如果是在 nodejs 中，需要安装 yarn add jsdom global-jsdom ，并且引入 require('global-jsdom/register')。

const editor = createEditor({ content }) // `content` 即为 JSON 内容
const html = editor.getHtml()
const text = editor.getText()

#open in new window设置内容

创建编辑器时，传入的默认内容。即编辑器创建完成后，立马显示这些内容。

#open in new window设置 HTML

【注意】这里的 HTML 内容必须是 wangEditor 生成的（即 editor.getHtml() 返回的） HTML 格式，不可以自己随意写。HTML 格式非常灵活，wangEditor 无法兼容所有的 HTML 格式。

例如，wangEditor 可以识别 hello 为加粗，但无法识别 **hello** 等其他加粗方式。

#open in new window创建时设置 HTML
const editor = createEditor({
  html: '<p>hello <strong>world</strong></p>', // 从 editor.getHtml() 获取的 html 内容
  // 其他属性...
})

#open in new window动态设置 HTML

editor.setHtml('<p>hello <strong>world</strong></p>')

注意，setHtml 主要用于回显编辑器输出的 HTML ，即 editor.getHtml() 的内容。 #open in new window设置 Text

// 1. 把 text 转换为 html
const text = '...' // text 内容
const html = text.split(/\n/).map(line => `<p>${line}</p>`).join('\n')

// 2. 设置 html
const editor = createEditor({
  html,
  // 其他属性...
})

// 3. 或，在创建完 editor 之后执行 setHtml
// editor.setHtml(html)

#open in new window设置 JSON

const editor = createEditor({
  content: [...], // editor.children 获取的内容
  // 其他属性
})

#open in new windowAjax 异步设置内容

可等待 Ajax 返回之后再创建编辑器。

// 伪代码
import { IDomEditor } from '@wangeditor/editor'

let editor: IDomEditor | null = null   // TS 语法
// let editor = null                   // JS 语法

ajax(url, res => {
  editor = createEditor({
    // content 或 html
    // 其他属性
  })
})