记录wangEditor5简单使用

1. 首先在官网找了很久的js、css下载地址，结果没找到，后面无奈只能跟着官网指导走（这一步很坑，以为能在官网找到现成的js，后面又去网上找资源，结果网上资源不行，还好后面狂找找到了）
2.  把js、css引入前端页面，这一步很简单，就是把需要的js、css复制进项目，再引入就行
3. 配置工具栏和编辑器，其实就是跟着官网走，按文档去配置，多尝试

 前端代码

<div class="row">
								<div class="col-sm-12">
									<div class="form-group">
										<label for="" class="col-sm-1 control-label no-padding-right">内容：<span
												class="red">*</span></label>

										<div class="col-sm-10">
											<div id="editor—wrapper">
												<div id="toolbar-container"><!-- 工具栏 --></div>
												<div id="editor-container"><!-- 编辑器 --></div>
												<label for="content"><textarea style="display:none;" id="content" name="content"></textarea></label>
											</div>
##											<textarea style="height:100px;" rows="3" class="form-control" name="content" id="content"></textarea>
										</div>

									</div>
								</div>
							</div>

 textarea块隐藏了，方便把数据传到后台去

js代码

<script type="text/javascript">

	const { createEditor, createToolbar } = window.wangEditor

//编辑器配置
	const editorConfig = {
		placeholder: 'Type here...',
		autoFocus:false,
		maxLength: 1000,
		onChange(editor) {
			const html = editor.getHtml()
			console.log('editor content', html)
			// 也可以同步到 <textarea>
			const contentVal = $("#content");
			contentVal.val(html);
			contentVal.focusin();
			contentVal.blur();

		}
	}

	const editor = createEditor({
		selector: '#editor-container',
		html: '',
		config: editorConfig,
		mode: 'default', // or 'simple'
	})

//菜单栏配置
	const toolbarConfig = {
//排除的菜单组
		excludeKeys:[
			'emotion',
			'group-image',
			'fullScreen',
			'group-video' // 排除菜单组，写菜单组 key 的值即可
		]
	}

	const toolbar = createToolbar({
		editor,
		selector: '#toolbar-container',
		config: toolbarConfig,
		mode: 'default', // or 'simple'
	})



</script>

最后页面效果如下图，上传图片、视频、附件啥的都被我排除了，毕竟产品文档也没说要做，还麻烦，得重新写上传的接口