wangEditor的基础使用及图片视频上传配置

时间:2023-08-26 16:24:12 类型:JS/JQUERY
字号:    

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

效果图如下:

效果.png

<