TINYMCE功能咨询：添加图片后生成图片上方文本的option标签

绝对有可行的方案！我来一步步给你拆解怎么实现这个需求：

1. 监听TinyMCE的图片插入事件 #

首先你需要在TinyMCE初始化时，通过setup钩子监听图片插入动作。最可靠的方式是监听ExecCommand事件——因为插入图片时会触发mceInsertImage命令；如果要兼容拖拽/粘贴图片的场景，还可以额外监听Paste和Drop事件。

示例代码片段：

tinymce.init({
  selector: '#your-editor-id',
  plugins: 'image', // 确保加载图片插件
  toolbar: 'image',
  setup: function(editor) {
    // 监听手动插入图片的命令
    editor.on('ExecCommand', function(e) {
      if (e.command === 'mceInsertImage') {
        setTimeout(() => handleImageInsert(editor), 100);
        // 延迟执行确保图片已插入编辑器DOM
      }
    });

    // 兼容粘贴/拖拽图片的场景
    editor.on('Paste Drop', function() {
      setTimeout(() => handleImageInsert(editor), 200);
    });
  }
});

2. 动态生成Option并添加到表单 #

在handleImageInsert函数里，我们先定位刚插入的未处理图片，再生成对应的option元素追加到目标select表单中：

function handleImageInsert(editor) {
  // 获取所有未标记为已处理的图片
  const images = editor.dom.select('img:not([data-processed])');
  if (!images.length) return;

  const targetSelect = document.getElementById('your-select-id');
  images.forEach(img => {
    // 标记图片已处理，避免重复触发逻辑
    img.setAttribute('data-processed', 'true');
    
    // 生成option文本（可自定义，比如用图片alt、文件名或用户输入的标题）
    const optionText = img.alt || `图片${targetSelect.options.length + 1}`;
    
    // 创建并添加option到select
    const option = document.createElement('option');
    option.value = img.src; // 用图片src作为唯一标识，也可自定义其他值
    option.textContent = optionText;
    targetSelect.appendChild(option);

    // 给图片添加上方显示文本
    addTextAboveImage(editor, img, optionText);
  });
}

3. 在图片上方添加显示文本 #

通过TinyMCE的DOM API，我们可以把图片和文本包裹在一个容器里，让文本固定显示在图片上方：

function addTextAboveImage(editor, img, text) {
  // 创建容器，统一控制排版
  const container = editor.dom.create('div', { 
    style: 'text-align: center; margin: 1.5em 0;' 
  });
  // 创建文本元素
  const textEl = editor.dom.create('p', { 
    style: 'margin: 0 0 0.8em 0; font-size: 0.95em; color: #555;' 
  }, text);
  
  // 将文本和图片放入容器，替换原图片节点
  editor.dom.append(container, textEl);
  editor.dom.append(container, img);
  editor.dom.replace(container, img);
}

额外优化建议 #

• 可以修改TinyMCE的图片插入弹窗，新增一个“图片标题”输入框，让用户自定义option文本和图片上方的显示文本，体验更友好。
• 如果需要支持删除图片时同步删除对应option，可以监听编辑器的NodeChange或Remove事件，通过图片的data-processed标记和option的value关联匹配后删除。

内容的提问来源于stack exchange，提问作者Maciek M