wangeditor图片视频上传配置

桃扇骨 2024-03-25 09:30 73阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <style>
      #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
      }
      #toolbar-container { border-bottom: 1px solid #ccc; }
      #editor-container { height: 80vh; }
    </style>
    </head>
    <body>
    <div id="editor—wrapper">
        <div id="toolbar-container"></div>
        <div id="editor-container"></div>
    </div>
    </body>
    <script>
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '请输入内容……',
    scroll:true,
        onChange(editor) {
          const html = editor.getHtml()
          console.log('editor content', html)
          // 也可以同步到 <textarea>
        },
    maxLength: 10,
    onMaxLength(editor) {   // TS 语法
        // 当达到 maxlength 限制时，触发该回调函数
    alert("超出参数限制")
    }
     ,MENU_CONF: {}
    }
    //修改 uploadImage 菜单配置
    editorConfig.MENU_CONF['uploadImage'] = {
    server: '',
            fieldName: 'file',
        maxFileSize: 1 * 1024 * 1024, // 1M
        maxNumberOfFiles: 1,
        allowedFileTypes: ['image/*'],
        withCredentials: false,
        timeout: 50 * 1000, // 5 秒
    onBeforeUpload(file) {
            console.log('onBeforeUpload', file)
            return file 
          },
    onProgress(progress) {
            console.log('onProgress', progress)
          },
    onSuccess(file, res) {
            console.log('onSuccess', file, res)
          },
    onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
          },
    onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
          }
    }
    editorConfig.MENU_CONF['uploadVideo'] = {
    server: '',
        fieldName: 'file',
        maxFileSize: 50 * 1024 * 1024, // 5M
        maxNumberOfFiles: 1,
        allowedFileTypes: ['video/*'],
        timeout: 15 * 1000, // 15 秒
        onBeforeUpload(file) {      // JS 语法
            return file
        },
        onProgress(progress) {       // JS 语法
            console.log('progress', progress)
        },
        onSuccess(file, res) {          // JS 语法
            console.log(`${file.name} 上传成功`, res)
        },
        onFailed(file, res) {          // JS 语法
            console.log(`${file.name} 上传失败`, res)
        },
        onError(file, err, res) {               // JS 语法
        alert(err)
            console.log(`${file.name} 上传出错`, err, 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'
    })
    </script>
    </html>