TinyMCE粘贴上传图片格式异常：生成[img]而非<img>标签求助

嘿，我看你遇到的问题很典型——TinyMCE粘贴图片后生成了BBcode格式的[img]data:image/png;base64,...[/img]标签，而不是你需要的标准HTML<img src="data:image/png;base64,..." />标签。问题其实出在你的配置细节里，咱们一步步来解决：

核心问题原因 #

你当前的配置中加载了bbcode插件，这个插件的作用就是将编辑器内容强制转换为BBcode格式，包括把图片自动转成[img]标签，这和你需要的HTML格式直接冲突了。

具体解决方案 #

1. 移除bbcode插件 #

从plugins数组里删掉bbcode，这是最关键的一步，这样编辑器就不会再用BBcode规则处理内容了。

2. 调整images_dataimg_filter配置 #

你当前的images_dataimg_filter函数只保留带有internal-blob属性的图片，会过滤掉粘贴的base64图片。我们需要修改这个函数让它返回true（或者直接移除这个配置，使用默认行为），这样TinyMCE会把粘贴的base64图片转换为标准的HTML<img>标签。

3. 确保必要插件正常加载 #

确认paste和image插件在plugins数组中，这两个是处理图片粘贴、生成HTML图片标签的基础插件。

修改后的完整配置代码 #

tinymceFunction() {
  tinymce.init({
    relative_urls: false,
    document_base_url: window.location.protocol + '//' + window.location.host + '/' + window.location.pathname.split('/')[1],
    skin_url: 'assets/skins/lightgray',
    paste_data_images: true,
    menubar: true,
    statusbar: false,
    selector: '#' + this.elementId,
    branding: false,
    // 移除bbcode插件，保留必要功能插件
    plugins: ['link', 'table', 'autoresize', 'code', 'image', 'paste'],
    toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
    autoresize_min_height: 50,
    autoresize_max_height: 300,
    setup: (editor: any) => {
      this.editor = editor;
      editor.on('keyup change', () => {
        const content = editor.getContent();
        this.onEditorContentChange.emit(content);
      });
    },
    // 修改过滤规则，保留所有粘贴的base64图片
    images_dataimg_filter: function (img) {
      return true; // 也可以直接删除这个配置项，使用默认行为
    }
  });
}

额外说明 #

• 如果你完全不需要BBcode相关功能，移除bbcode插件就彻底解决了格式冲突问题。
• paste_data_images: true已经开启，它允许编辑器直接粘贴图片并转换为base64格式的<img>标签，配合调整后的过滤规则就能完美实现你的需求。

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