步骤一:到官网下载css及js两个文件
步骤二:
在html中引入
css文件:
#editor—wrapper {
border: 1px solid #ccc;
z-index: 100; /* 按需定义 */
}
#toolbar-container { border-bottom: 1px solid #ccc; }
#editor-container { height: 300px; }
.w-e-bar-item{padding: 3px} HTML文件:
<link rel="stylesheet" href="style.css" media="all"> <div id="editor—wrapper"> <div id="toolbar-container"><!-- 工具栏 --></div> <div id="editor-container"><!-- 编辑器 --></div> <input type="hidden" name="content" id="content"> </div> <script src="index.js' %}"></script>
JS配置:
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: '请填写内容...',
onChange(editor) {
const html = editor.getHtml()
document.querySelector("#content").innerHTML = html
// 也可以同步到 <textarea>
},
MENU_CONF: {},
}
//上传图片配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '接收图片地址',
fieldName: 'file',
maxFileSize: 2 * 1024 * 1024, // 2M
maxNumberOfFiles: 10,
allowedFileTypes: ['image/*'],
onSuccess(file, res) {
console.log(res)
},
}
//上传视频配置
editorConfig.MENU_CONF['uploadVideo'] = {
server: '接受视频地址',
fieldName: 'file',
maxFileSize: 20 * 1024 * 1024, // 20M
maxNumberOfFiles: 10,
allowedFileTypes: ['video/*'],
onSuccess(file, res) { // JS 语法
console.log(res)
},
}
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'
//mode:'simple'
})后端语言返回(这里使用了Python)
@csrf_exempt
def add(request):
if request.method == "POST":
file = request.FILES.get("file")
action = request.GET.get("action")
if file:
ext = file.name.split(".")[-1]
path = make_dirs()
new_name = uuid.uuid1().hex + "." + ext
destination = os.path.join(settings.UPLOAD_PATH, path + "/" + new_name)
# destination = "./static/up/" + new_name
with open(destination, 'wb+') as my_file:
for chunk in file.chunks():
my_file.write(chunk)
if not action:
return JsonResponse({'fileName': path + "/" + new_name})
elif action == "wang_editor_img":
# 使用wangeditor上传图片
data = {
"errno": 0, # 注意:值是数字,不能是字符串
"data": {
"url": settings.STATIC_URL + path + "/" + new_name, # 图片 src ,必须
"alt": "yyy", # 图片描述文字,非必须
"href": settings.STATIC_URL + path + "/" + new_name # 图片的链接,非必须
}
}
return JsonResponse(data)
elif action == "wang_editor_video":
data = {
"errno": 0, # 注意:值是数字,不能是字符串
"data": {
"url": settings.STATIC_URL + path + "/" + new_name, # 图片 src ,必须
"poster": "yyy", # 视频封面图片 url ,可选
}
}
return JsonResponse(data)效果图如下:

