wangeditor富文本編輯器上傳圖片
前端配置MENU_CONF很重要!!!
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const {createEditor, createToolbar} = window.wangEditor
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 同步到隱藏的 <textarea>
$('#id_content').val(html) // document.getElementById('id_content').value = html
},
// 菜單配置,這個必須要寫
MENU_CONF: {}, // 菜單配置,這個必須要寫
};
editorConfig.MENU_CONF['uploadImage'] = {
server: '/upload_image/',
fieldName: 'image',
headers: {
'X-CSRFToken': '{{ csrf_token }}' // 傳遞CSRF Token
},
onBeforeUpload(file) { // JS 語法
// file 選中的文件,格式如 { key: file }
return file
},
// 上傳進度的回調函數
onProgress(progress) { // JS 語法
// progress 是 0-100 的數字
console.log('progress', progress)
},
// 單個文件上傳成功之后
onSuccess(file, res) { // JS 語法
console.log(`${file.name} 上傳成功`, res)
},
// 單個文件上傳失敗
onFailed(file, res) { // JS 語法
console.log(`${file.name} 上傳失敗`, res)
},
// 上傳錯誤,或者觸發 timeout 超時
onError(file, err, res) { // JS 語法
console.log(`${file.name} 上傳出錯`, err, res)
},
}
const editor = createEditor({
selector: '#editor-container',
html: '',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
</script>

浙公網安備 33010602011771號