JS_wangEditor富文本编辑器

官网：https://www.wangeditor.com/

引入 CSS 定义样式

<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>

定义 HTML 结构

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

引入 JS 创建编辑器

<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const { createEditor, createToolbar } = window.wangEditorconst editorConfig = {placeholder: 'Type here...',onChange(editor) {const html = editor.getHtml()console.log('editor content', html)// 也可以同步到 <textarea>}
}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>

.