@wangeditor/plugin-mention
Version:
wangEditor mention plugin
77 lines (66 loc) • 1.88 kB
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>wangEditor mention demo</title>
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
textarea {
outline: none;
}
#mention-modal {
display: none;
position: absolute;
border: 1px solid #ccc;
background-color: #fff;
padding: 5px;
}
#mention-modal input {
width: 100px;
outline: none;
}
#mention-modal ul {
padding: 0;
margin: 0;
}
#mention-modal ul li {
list-style: none;
cursor: pointer;
padding: 3px 0;
text-align: left;
}
#mention-modal ul li:hover {
/* background-color: #f1f1f1; */
text-decoration: underline;
}
</style>
</head>
<body style="margin: 0 20px;">
<p>wangEditor mention demo</p>
<div>
<div id="toolbar-container" style="border: 1px solid #ccc; border-bottom: none;"></div>
<div id="editor-container" style="border: 1px solid #ccc; height: 400px;"></div>
</div>
<div style="margin-top: 20px; display: flex;">
<div style="flex: 1; padding-right: 5px;">
<textarea id="text-html" style="width: 100%; height: 300px;"></textarea>
</div>
<div style="flex: 1; padding-left: 5px;">
<textarea id="text-json" style="width: 100%; height: 300px;"></textarea>
</div>
</div>
<div id="mention-modal">
<input id="mention-input">
<ul id="mention-list">
<li>A张三</li>
<li>B李四</li>
<li>C小明</li>
<li>D小李</li>
<li>E小红</li>
</ul>
</div>
</body>
</html>