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号