Getting Started
If you wanna to use wangEditor in Vue or React, please read this article first, then check this article.
Create Empty Editor
Define Html Code
<div id="toolbar-container">
<!-- for toolbar -->
</div>
<div id="editor-container">
<!-- for editor -->
</div>
Create Editor and Toolbar
Import wangEditor
// npm
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar, IEditorConfig, IDomEditor } from '@wangeditor/editor'
// CDN
// const { createEditor, createToolbar } = window.wangEditor
Create editor and toolbar
const editorConfig: Partial<IEditorConfig> = {}
editorConfig.placeholder = 'Type here please'
editorConfig.onChange = (editor: IDomEditor) => {
// will be trigger when content or selection changed
console.log('content', editor.children)
console.log('html', editor.getHtml())
}
const toolbarConfig: Partial<IToolbarConfig> = {}
// create editor
const editor = createEditor({
selector: '#editor-container',
config: editorConfig,
mode: 'default' // or 'simple'
})
// create toolbar
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default' // or 'simple'
})
With the simple code above, you will create a basic editor.
TIP
- The toolbar is not necessary
- You can config toolbar menus manually
- There are many editor configs
Mode
There are to modes, see Demo.
default
mode, Integrate all wangEditor functionssimple
mode, Only basic functions, but terse
TIP
No matter which mode is used, it does not affect function and config.
<textarea>
Use When editor content changed, sync to <textarea>
.
<textarea id="textarea-1"></textarea>
<textarea id="textarea-2"></textarea>
editorConfig.onChange = (editor: IDomEditor) => {
const content = editor.children
const contentStr = JSON.stringify(content)
document.getElementById('textarea-1').value = contentStr
const html = editor.getHtml()
document.getElementById('textarea-2').value = html
}
Size and Style
Width and Height
Width is self-adaption, 100% by default.
Height is min-height: 300px;
by default, you can change it manually.
<div id="toolbar-container"></div>
<div id="editor-container" style="height: 600px;"></div>
Z-Index
wangEditor do not set z-index
ever, you can set it yourself.
<div id="toolbar-container" style="z-index: 101;"></div>
<div id="editor-container" style="z-index: 100;"></div>
Full-Screen
wangEditor embed full-screen menu, but there is one requirement: toolbar-container
and editor-container
must have same parent node.
<style>
.full-screen-container {
z-index: 100; /* 如有需要,可以自定义 z-index */
}
</style>
<div class="full-screen-container">
<div id="toolbar-container"> <!-- for editor --> </div>
<div id="editor-container"> <!-- for toolbar --> </div>
</div>
If you unwanted full-screen menu, you can hide this by { excludeKeys: 'fullScreen' }
, see Toolbar Config.
Others
- You can fixed toolbar to top by define
toolbar-container
style. - You can dev an editor like Google Doc by redefine html structure and style.
Multiple Editors
You can create many editors in one page.
<div>
<div id="toolbar-container-1"></div>
<div id="editor-container-1"></div>
</div>
<hr>
<div>
<div id="toolbar-container-2"></div>
<div id="editor-container-2"></div>
</div>
// create editor1
const editor1 = createEditor({
selector: '#editor-container-1',
mode: 'default'
})
// create toolbar1
const toolbar1 = createToolbar({
editor: editor1,
selector: '#toolbar-container-1',
mode: 'default'
})
// create editor2
const editor2 = createEditor({
selector: '#editor-container-2',
mode: 'simple'
})
// create toolbar2
const toolbar2 = createToolbar({
editor: editor2,
selector: '#toolbar-container-2',
mode: 'simple'
})