## 文档地址
> https://www.wangeditor.com/
## 使用方法
~~~
<!--工具栏-->
<div id="toolbar-container"></div>
<!--编辑器-->
<div id="editor-container"></div>
<!-- 引入 css -->
<link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<!-- 引入 js -->
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
<script>
var text = '';
const E = window.wangEditor
const editorConfig = {
placeholder: '请输入正文',
scroll: false, // 禁止编辑器滚动
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 5 * 1024 * 1024 // 5M 以下插入 base64
}
},
onChange(editor) {
text = editor.getHtml()
}
}
// 设置上传图片地址接口
editorConfig.MENU_CONF['uploadImage'] = {
server: '{:_config('aliyun.upload_url')}',
}
// 先创建 editor
const editor = E.createEditor({
selector: '#editor-text-area',
content: [],
// html: '',
config: editorConfig
})
// 创建 toolbar
const toolbar = E.createToolbar({
editor,
selector: '#editor-toolbar',
config: {
excludeKeys: [
'fullScreen',
'todo',
"codeBlock"
],
}
})
// 点击空白处 focus 编辑器
document.getElementById('editor-text-area').addEventListener('click', e => {
if (e.target.id === 'editor-text-area') {
editor.blur()
editor.focus(true) // focus 到末尾
}
})
</script>
~~~
> 1. 工具栏并不是强制的，如不需要，可以不创建。这并不影响编辑器的使用。
> 2. 工具栏的菜单是可以配置的，可参考[配置](https://www.wangeditor.com/v5/toolbar-config.html)。
> 3. 其他 editor config 可参考[配置](https://www.wangeditor.com/v5/editor-config.html)
