<!DOCTYPE html>
<html>
<head>
<link href="wangeditor/css/style.css" rel="stylesheet">
<script src="wangeditor/jquery.min.js"></script>
<script src="wangeditor/index.js"></script>
<body>
<div id="editor—wrapper">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container"><!-- 编辑器 --></div>
</div>
<script>
const { createEditor, createToolbar } = window.wangEditor;
const editorConfig = {
placeholder: 'Type here...',
MENU_CONF: {},
onChange(editor) {
}
}
editorConfig.MENU_CONF['uploadImage'] = {
async customUpload(file, insertFn) {
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: "/fileUpload",
type: 'POST',
data: formData,
processData:false,
contentType: false,
dataType: 'json',
success: function (res) {
if (res.code == 200) {
insertFn(res.data.target, "", "")
}
},
error: function () {
}
});
}
}
const editor = createEditor({
selector: '#editor-container',
html: $("#contentDiv").html(),
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {excludeKeys: [
"blockquote",
'group-more-style',
"bgColor",
"fontFamily",
"lineHeight",
"|",
"bulletedList",
"numberedList",
"todo",
"group-video",
"insertTable",
"codeBlock",
"divider",
"undo",
"redo"
]};
createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
console.log(editor.getHtml())
</script>
</body>
</html>
最好用的富文本编辑器wangeditor
需积分: 2 122 浏览量
2024-05-29
17:27:11
上传
评论
收藏 299KB RAR 举报
wangeditor.rar （4个子文件） 
wangeditor css 
style.css 15KB index.js 1.27MB jquery.min.js 84KB
index.html 2KB资源评论
ybwantao
- 粉丝: 0
- 资源: 4
