步骤一:到官网下载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)
效果图如下: