步驟一：到官網(wǎng)下載css及js兩個(gè)文件
步驟二：
在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: '請(qǐng)?zhí)顚憙?nèi)容...',
onChange(editor) {
const html = editor.getHtml()
document.querySelector("#content").innerHTML = html
// 也可以同步到 <textarea>
},
MENU_CONF: {},
}
//上傳圖片配置
editorConfig.MENU_CONF['uploadImage'] = {
server: '接收?qǐng)D片地址',
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 語(yǔ)法
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'
})后端語(yǔ)言返回(這里使用了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, # 注意：值是數(shù)字，不能是字符串
"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, # 注意：值是數(shù)字，不能是字符串
"data": {
"url": settings.STATIC_URL + path + "/" + new_name, # 圖片 src ，必須
"poster": "yyy", # 視頻封面圖片 url ，可選
}
}
return JsonResponse(data)效果圖如下：
