在 TinyMCE 5 编辑器中将“rel”属性添加到 img 标签答案

【问题标题】：Add "rel"-attribute to img tag in TinyMCE 5 editor在 TinyMCE 5 编辑器中将“rel”属性添加到 img 标签
【发布时间】：2021-07-28 12:33:08
【问题描述】：

我搜索了一个解决方案，可以为 TinyMCE 5 编辑器中添加的每个图像自动添加“rel-attribute”。所以html标签应该是这样的：

<img class="imageborder" src="https://xy.jpg" rel="lightbox" width="500" height="333" />

我试过这样，但它没有被添加。这是JSFiddle。

tinyMCE.init({
    selector: '#myTextarea',
    plugins: 'code image autolink link lists charmap print preview textcolor',
    toolbar: 'code image link | undo redo | insert | ',
    menubar: false,
    min_height: 300,
    image_class_list: [
        { title: 'imageborder', value: 'imageborder' },
    ],
    image_rel_list: [
        { title: 'lightbox', value: 'lightbox' },
    ],
    setup: function (ed) {
        ed.on("keyup", function () {
            $('#preview').html(tinymce.activeEditor.getContent());
        });
    }
});

【问题讨论】：

image_rel_list 没有出现在 TinyMCE Image api 中 -> tiny.cloud/docs/plugins/opensource/image。为什么需要使用 rel 属性？ rel 通常不在 img 标签上使用。

标签： javascript jquery tinymce

【解决方案1】：

您可以在NodeChange 事件中获取img 元素。

文档： https://www.tiny.cloud/docs-4x/advanced/events/#nodechange

Jsfiddle： https://jsfiddle.net/aswinkumar863/L48jdqzs/

tinyMCE.init({
  ...
  setup: function(ed) {
    ed.on("keyup", function() {
      $('#preview').html(tinymce.activeEditor.getContent());
    });
    ed.on('NodeChange', function(e) {
      e.element.parentNode.querySelectorAll('img:not([rel=lightbox])').forEach(img => {
        img.setAttribute('rel', 'lightbox');
      });    
    });
  }
});

【讨论】：

【解决方案2】：

您可以将 rel 添加到链接而不是像这样的图像：

    tinyMCE.init({
    selector: '#myTextarea',
    plugins: 'code image autolink link lists charmap print preview textcolor',
    toolbar: 'code image link | undo redo | insert | ',
    menubar: false,
    min_height: 300,
    image_class_list: [
        { title: 'imageborder', value: 'imageborder' },
    ],
    rel_list: [
             {title: 'lightbox', value: 'lightbox'},
            {title: 'Other rel', value: 'otherrel'}
        ],
    setup: function (ed) {
        ed.on("keyup", function () {
            $('#preview').html(tinymce.activeEditor.getContent());
        });
    }
});

它在此处的文档中：https://www.tiny.cloud/docs/plugins/opensource/link/#exampleusingrel_list

然后使用 a rel 作为灯箱链接，而不是图像。

【讨论】：