## 文檔地址
> 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)
