wangEditor 富文本编辑器

富文本使用。

1：头部引入

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
</style>

2：HTML结构

<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>

3：底部js

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditor;
			
const editorConfig = { MENU_CONF:{} };
			
	  editorConfig.placeholder='请输入';

	  editorConfig.onChange=(editor)=>{
					
			 const html = editor.getHtml();
				  
			 document.getElementById('about').value=html;//这里我把数据实时引入到一个input里
			
		};
				
        //这里是图片上次

    	editorConfig.MENU_CONF['uploadImage'] = {
			
            server: '/admin.system/insertAboutImg',//这里是接口 传出值 wangeditor-uploaded-image 注意
		}
			

        const editor = createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',//这里是渲染页面的首显数据
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {}

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

这里会遇到一个回显问题，我使用layuiadmin框架 这里我使用了一个方法

<script type="text/html" template lay-url="/admin.system/index" lay-done="layui.data.done(d);"></script>//头部引入

  layui.data.done = function(d){

        //里面引入 

    	const editor = createEditor({
			selector: '#editor-container',
			html: d.data.system_about,//服务器传出
			config: editorConfig,
			mode: 'default', // or 'simple'
		});

   }