53 lines
1.3 KiB
HTML
53 lines
1.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>富文本编辑器</title>
|
||
|
|
<link href="./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>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="editor—wrapper">
|
||
|
|
<div id="toolbar-container"><!-- 工具栏 --></div>
|
||
|
|
<div id="editor-container"><!-- 编辑器 --></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script src="./index.js"></script>
|
||
|
|
<script>
|
||
|
|
const { createEditor, createToolbar } = window.wangEditor
|
||
|
|
|
||
|
|
const 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>
|