wangEditor V3 拓展菜单 - 图片/视频选择功能实现 - 常规

wangEditor V3 拓展菜单 - 图片/视频选择功能实现

本教程将指导您如何在 wangEditor V3 中实现一个拓展菜单，该菜单允许用户选择图片或视频并插入到编辑器中。

功能概述

该功能的核心逻辑如下：

在菜单栏中增加一个名为 '图片/视频选择' 的拓展菜单，并注册相应的点击事件。
用户点击菜单后，弹出一个文件选择窗口，允许用户选择图片或视频文件。
用户选择文件后，将其发送到服务器端进行处理。
服务器端接收文件并将其转换成 Base64 编码的字符串，并将该字符串封装成 JSON 对象返回给客户端。
客户端接收 JSON 对象后，获取其中的 Base64 编码字符串，并将其转换成图片或视频的 HTML 代码，并插入到 wangEditor 中。
用户可以对插入的图片或视频进行编辑和调整。

代码实现

1. 在菜单栏中增加 '图片/视频选择' 菜单

// 在 wangEditor 初始化后调用
editor.menus.extend('insertFile', function (editor) {
  var $btn = $('<li><a href="#" class="wangeditor-menu-img-video-select"><i class="wangeditor-menu-img-video-select"></i></a></li>')
  var $container = $('<div class="wangeditor-img-video-select-container"></div>')
  var $mask = $('<div class="wangeditor-mask"></div>')
  var $iframe = $('<iframe src="img-video-select.html"></iframe>')
  var $closeBtn = $('<div class="wangeditor-close-btn"><i class="wangeditor-close-btn"></i></div>')

  $btn.on('click', function (e) {
    e.preventDefault()
    $container.append($mask).append($iframe).append($closeBtn)
    $('body').append($container)
  })

  $closeBtn.on('click', function () {
    $container.remove()
  })

  return $btn
})

2. 服务器端接收文件并返回 JSON 对象

import base64
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    content = file.read()
    b64 = base64.b64encode(content)
    return jsonify({'code': 0, 'data': {'b64': b64.decode()}})

3. 客户端接收 JSON 对象并插入图片或视频的 HTML 代码

$(window).on('message', function (e) {
  var data = e.originalEvent.data
  if (data.code === 0) {
    var b64 = data.data.b64
    if (/.(jpg|jpeg|png|bmp|gif)$/i.test(data.data.name)) {
      var html = '<img src="data:image/png;base64,' + b64 + '"/>'
    } else if (/.(mp4|ogg|webm)$/i.test(data.data.name)) {
      var html = '<video src="data:video/mp4;base64,' + b64 + '" controls></video>'
    }
    editor.command(null, 'insertHTML', html)
  }
})

4. 在文件选择窗口中发送文件到服务器端

$('#file').on('change', function () {
  var file = this.files[0]
  var formData = new FormData()
  formData.append('file', file)

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
      window.parent.postMessage(data, '*')
    }
  })
})

总结

通过以上步骤，您就可以在 wangEditor V3 中成功实现一个图片/视频选择功能。用户可以方便地从本地选择图片或视频，并将其插入到编辑器中，为您的网站或应用程序提供更丰富的内容编辑功能。