内容处理

快速了解可查看视频教程。

获取内容

获取 HTML 和 Text

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

如果你需要导出带唯一标识属性的 HTML（用于节点追踪/定位），可使用 editor.getHtmlWithId(idKey?) ：

const html = editor.getHtmlWithId() // 默认 data-w-e-id
const html2 = editor.getHtmlWithId('data-node-id') // 自定义属性名

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

获取 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()

自定义样式

编辑器输出或者生成的 HTML 都是纯标签，没有内联样式。所以，显示 HTML 时需要你自定义样式。可参考以下示例

• 显示 HTML
• 自定义样式

另外，代码高亮也需要自行处理，推荐使用 Prism.js ，因为编辑器内容内部也是基于 Prism.js 来实现的。可参考 demo。

编辑器内部样式

为避免页面中的 reset.css、Tailwind CSS Preflight 等全局样式影响编辑体验，wangEditor 会在编辑区域内部提供一组带作用域的基础内容样式，根选择器为 .w-e-text-container [data-slate-editor]。这些样式会维护标题层级、段落和列表间距、列表标记、代码和表格等结构性表现。

这是 CSS 作用域约束，不是 iframe 或 Shadow DOM 隔离。业务页面仍可以通过编辑器容器或 [data-slate-editor] 下更具体的选择器，按需覆盖字体、颜色和间距；不要使用无作用域的 !important 覆盖编辑器结构样式。

该行为只适用于编辑器内部。editor.getHtml() 返回的仍是纯 HTML，不包含这些 CSS。将内容渲染到文章详情、评论或其他编辑器之外的页面时，需要由业务页面提供对应的内容展示样式。

该约定用于处理 Issue #988，实现关联 PR #992。

设置内容

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

设置 HTML

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

例如，wangEditor 可以识别 <strong>hello</strong> 为加粗，但无法识别 <span style="font-weight: bold;">hello</span> 等其他加粗方式。

创建时设置 HTML

const editor = createEditor({
  html: '<p>hello <strong>world</strong></p>', // 从 editor.getHtml() 获取的 html 内容
  // 其他属性...
})

动态设置 HTML

参考 demo

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

TIP

注意，setHtml 主要用于回显编辑器输出的 HTML ，即 editor.getHtml() 的内容。
如果想插入一段 HTML ，请使用 dangerouslyInsertHtml

设置 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)

设置 JSON

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

Ajax 异步设置内容

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

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

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

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

TIP

其他的内容处理，可参考 API