Upgrade from v5 to v6
The main breaking change in @wangeditor-next/editor@6.0.0 is the alignment model and exported HTML structure of built-in video nodes. Other changes in the same release, including table drag behavior, are bug fixes.
Upgrade dependencies
npm install @wangeditor-next/editor@^6.0.0React projects must upgrade the wrapper at the same time:
npm install @wangeditor-next/editor-for-react@^3.0.0For Vue 2, Vue 3, and optional plugins, install their latest releases and verify that the lockfile actually resolves @wangeditor-next/editor to 6.x.
Video node alignment
v5 video nodes used textAlign. v6 uses the media-specific align field:
type VideoAlign = 'left' | 'center' | 'right'
const video = {
type: 'video',
src: 'https://example.com/video.mp4',
align: 'center' as VideoAlign,
children: [{ text: '' }],
}Legacy textAlign nodes and HTML remain importable. The editor maps left, center, and right to the new media alignment model. justify is no longer valid for videos, and unknown values fall back to center alignment.
Exported HTML structure
v5 used <div data-w-e-type="video"> with text-align. v6 exports a full-width flex container:
<figure
data-w-e-type="video"
data-w-e-is-void
data-w-e-align="center"
style="display: flex; justify-content: center; margin: 0; max-width: 100%; width: 100%;"
>
<video><!-- ... --></video>
</figure>If application CSS, HTML sanitizers, server-side templates, or automated tests depend on the old div tag, data-w-e-text-align, or text-align, update them to support figure[data-w-e-type="video"], data-w-e-align, and the flex alignment structure.
Upgrade checklist
- Replace
textAlignwithalignin custom video nodes. - Find CSS and DOM queries that target
div[data-w-e-type="video"]. - Verify that video HTML from
editor.getHtml()passes application sanitization and persistence. - Run
editor.setHtml(oldHtml)with existing content and verify video position and size. - In React projects, verify that
@wangeditor-next/editor-for-reactis on 3.x.
See the v6.0.0 release notes for the complete release.